[Chartjs]-Sort one array and keep other two arrays in sync

by

6👍

✅

If you want to keep the arrays separate, you can extract the index ordering by sorting the age array and then sort each array by that ordering:

let data = {
  "age": [41, 21, 88],
  "name": ["Rob", "Tom", "Susan"],
  "color": ["Red", "Blue", "Orange"]
};

let indexOrder = data.age
  .map((a, i) => [a, i])
  .sort((a, b) => a[0] - b[0])
  .map(a => a[1]);

for (let k in data) {
  data[k] = indexOrder.map(i => data[k][i]);
}

console.log(data);

3👍

You should really store such information in a true object-oriented manner, like this:

[
  {
    "age": 41,
    "name": "Rob",
    "color": "Red"
  },
  {
    "age": 21,
    "name": "Tom",
    "color": "Blue"
  },
  {
    "age": 88,
    "name": "Susan",
    "color": "Orange"
  }
]

This may look like very verbose, but it is superior: the properties that belong together are now really bound together.

Sorting is then done as follows:

data.sort((a, b) => a.age - b.age)

1👍

You can always re-structure your data and sort it:

var data = {
  "age": [41, 21, 88],
  "name": ["Rob", "Tom", "Susan"],
  "color": ["Red", "Blue", "Orange"]
};
data.age.map(function(x, i) {
  return {
    age: data.age[i],
    name: data.name[i],
    color: data.color[i]
  };
}).sort(function(a, b) {
  // you can even sort by age then name then color
  return a.age - b.age;
}).forEach(function(o, i) {
  data.age[i] = o.age;
  data.name[i] = o.name;
  data.color[i] = o.color;
});
console.log(data);

0👍

As you object has separated values which should be altogether in one object as follow:

{
  "age": 41,
  "name": "Rob",
  "color": "Red"
}

An alternative if applying the function Array.prototype.map to create the object above, sort it by age (Array.prototype.sort) and then re-create the desired output using the function Array.prototype.reduce.

I recommend you to re-define how the related data is being stored.

let data = {    "age": [41, 21, 88],    "name": ["Rob", "Tom", "Susan"],    "color": ["Red", "Blue", "Orange"]},
    obj = data.age.map((age, i) => ({age, name: data.name[i], color: data.color[i]})),
    result = obj.sort(({age: a}, {age: b}) => a - b).reduce((a, c) => {
      a.age.push(c.age);
      a.color.push(c.color);
      a.name.push(c.name);
      return a;
    }, {age: [], color: [], name: []});

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

0👍

data = {
    "age": [41, 21, 88],
    "name": ["Rob", "Tom", "Susan"],
    "color": ["Red", "Blue", "Orange"]
}
var sortData = d => {
     var dat = []
     d.age.forEach(
     (di, i) => {
        dat.push(
            {
                age:di, 
                name:d.name[i],
                color:d.color[i]
            }
         )
     })
     dat.sort((a, b) => a.age - b.age)
     console.log(d)
     d = {
          age:[],
          name:[],
          color:[]
     }
     dat.forEach(di => {
          d.age.push(di.age)
          d.name.push(di.name)
          d.color.push(di.color)
     })
     console.log(d)
}
sortData(data)

Exactly how it was presented. You should do trincot’s answer tho

Leave a comment