CODEWITHSUNDEEP
javascriptjqueryarrayssorting
P. Ishtik
P. Ishtik

Reputation: 25

javascript - sorting array by order of another array

My goal is to sort this div

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div>

by another div in this order 

<div id="array"> Blue: 1,Red: 2,Orange: 3, </div>

So my Wanted result is to get result like this 

2xBlue;1xBlue;1xBlue;2xBlue;3xRed;3xRed;1xRed;1xRed;2xOrange;3xOrange ......

I aware for the first div needs to be used string split something like this .split('x')[1];

So far I have this code: 

var init_arr;
var scorer;

window.onload=function() {
  scorer=document.getElementById("array").innerHTML;
  init_arr = document.getElementById("myDiv").innerHTML;

var final_arr = init_arr.sort(function(a,b) {
   return scorer[a]-scorer[b];
});
}
alert(final_arr);

but getting error TypeError: init_arr.sort is not a function I guess init_arr and scorer are objects not strings Please Help

Upvotes: 1

Views: 203

Answers (3)

Andrew D
Andrew D

Reputation: 207

This is the sort of thing you could do:

function sort() {
  var scorer;
  var scorerLookup;
  var sortedLookup;

  //First we figure out the sort order
  scorer = document.getElementById("array").innerHTML.split(',');
  scorer.sort(function(a, b) {
    aVal = parseInt(a.split(':')[1].trim());
    bVal = parseInt(b.split(':')[1].trim());

    return aVal - bVal;
  });
  console.log(scorer);

  //Now put the sort order into an object so we can easily lookup values
  scorerLookup = {};
  for (var i = 0; i < scorer.length; i++) {
    var tempVal = scorer[i].split(':');
    scorerLookup[tempVal[0].trim()] = parseInt(tempVal[1].trim());
  }
  console.log(scorerLookup);

  //Now sort the main list
  init_arr = document.getElementById("myDiv").innerHTML.split(';');
  init_arr.sort(function(a, b) {
    aVal = scorerLookup[a.split('x')[1]];
    bVal = scorerLookup[b.split('x')[1]];

    return aVal - bVal;
  });
  console.log(init_arr);
}

window.onload=sort();

It needs more error trapping really (for blank values, etc) - but it should give you the general idea.

Upvotes: 0

Giovane
Giovane

Reputation: 1451

Well, I felt dummy after playing around to help you after seeing the first answer, but here it goes.

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div>

<div id="array"></div>

var init;
var final;
var scorer;

scorer = document.getElementById("array");
init = document.getElementById("myDiv");

init = init.textContent.split(/\;/);
init = init.filter(function(item) {
    return item.length > 0;
})
.map(function(item) {
    item = item.split(/x/);
  var obj = {
    color: item[1],
    amount: parseInt(item[0])
  }
    return obj;
});

final = init.reduce(function(scored, item) {
  if(scored[item.color] === undefined) {
    scored[item.color] = 0;
  }
  scored[item.color] += item.amount;
  return scored;
}, {});

final = Object.keys(final)
    .sort(function(item1, item2) {
        return final[item1].amount - final[item2].amount;
    })
  .map(function(key) {
    return key + ' :' + final[key];
  });
scorer.textContent = final.join(', ');

At least it was funny to play with map, filter, reduce and sort

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386550

This answer deletes the rest of the strings with ; or ,, treats array like a part of a JSON string, and sort with the part after the x.

window.onload = function() {
    var init_arr = document.getElementById("myDiv").innerHTML.split(';'),
        scorer = JSON.parse('{' + document.getElementById("array").innerHTML + '}');

    init_arr.sort(function(a, b) {
        var aa = a.split('x')[1],
            bb = b.split('x')[1];
        return scorer[aa] - scorer[bb];
    });
    alert(init_arr);
};
<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed</div>
<div id="array">"Blue": 1,"Red": 2,"Orange": 3</div>

But I really suggest to use real arrays for data and objects for sorting order. And not any parts of HTML code.

Upvotes: 1

Related Questions