javascript - sorting array by order of another array

Question

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

Not unless you create an array, for instance by splitting the string — adeneo
– adeneo, Commented Oct 27, 2016 at 20:37
my wanted result is right there in my question , basically to order all colors together 2xBlue;1xBlue;1xBlue;2xBlue;3xRed;3xRed;1xRed;1xRed;2xOrange;3xOrange ...... in the order of second string — P. Ishtik
– P. Ishtik, Commented Oct 27, 2016 at 20:45

Nina Scholz · Accepted Answer · 2016-10-27 20:50:30Z

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.

Giovane · Accepted Answer · 2016-10-27 21:01:20Z

0

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

answered Oct 27, 2016 at 21:01

Giovane

1,4511 gold badge15 silver badges25 bronze badges

1 Comment

P. Ishtik Over a year ago

your code is working bit different as I wanted its counting the appearences of each color witch is also nice and usefull :) , Thank you

Andrew D · Accepted Answer · 2016-10-27 21:05:40Z

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.

Collectives™ on Stack Overflow

javascript - sorting array by order of another array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related