javascript - reorder array of objects depending on property

Question

I am building a select dropdown input for a webpage. I want to make a 'popular' options group which appears at the top of the dropdown.

I am working with data in the following structure. I need to find a way to reorder the items inside the people array based on their name.

For example moving:
pogo-stick from toys[2] -> toys[0]
cards from toys[3] to toys [2]

I will have an array of popular toys such as:

popularToys: [
    "cards", "pogo-stick"
]

How can I iterate through the array of objects and move them in to the new order?

Data:

{
  "toys": [
    {
      "name": "car",
      "price": "10"
    },
    {
      "name": "duck",
      "price": "25"
    },
    {
      "name": "pogo-stick",
      "price": "60"
    },
    {
      "name": "cards",
      "price": "5"
    }
  ]
}

What is your expected output array? Seems like people are downvoting the answer. So, mention the structure of the output array. — Ankit Agarwal
– Ankit Agarwal, Commented Aug 23, 2018 at 11:50

Ankit Agarwal · Accepted Answer · 2018-08-23 11:40:43Z

1

Use forEach() loop where you can find the index of the toy object and swap:

var popularToys = [
    "cards", "pogo-stick"
]

var data = {
  "toys": [
    {
      "name": "car",
      "price": "10"
    },
    {
      "name": "duck",
      "price": "25"
    },
    {
      "name": "pogo-stick",
      "price": "60"
    },
    {
      "name": "cards",
      "price": "5"
    }
  ]
};
popularToys.forEach(function(toy, index){
  var toyObjIndex = data.toys.findIndex(x => x.name==toy);
  //swap
  var tempObj = data.toys[toyObjIndex];
  data.toys[toyObjIndex] = data.toys[index];
  data.toys[index] = tempObj;
});

console.log(data);

answered Aug 23, 2018 at 11:40

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GustavMahler Over a year ago

This looks great! I'm trying it out now. Thanks

Ankit Agarwal Over a year ago

@GustavMahler you can upvote it. Seems like someone who did not understood the question has downvoted it.

GustavMahler Over a year ago

Yes strange you got down voted. It certainly wasn't me! Your solution works perfectly.

Ankit Agarwal Over a year ago

@GustavMahler glad to help:)

niclas_4 Over a year ago

Way more Ressource taking Answer but gets upvoted and most helpful, nice.

Francis Leigh · Accepted Answer · 2018-08-23 13:47:30Z

Using a combination of map and filter we are able to split the required logic into to methods (Maybe more readable)

Popular() returns a filtered Array of any of the toy items that have a name property that corresponds with the current name in the iteration of popular

Rest() returns a filtered Array of toys where the name property of the toy in the iteration does not exist in the Array of String in popular

const toys = [
  {
    name: 'car',
    price: '10'
  },
  {
    name: 'exception',
    price: '999999'
  },
  {
    name: 'duck',
    price: '25'
  },
  {
    name: 'pogo-stick',
    price: '60'
  },
  {
    name: 'cards',
    price: '5'
  },
  {
    name: 'another !exception',
    price: '100000'
  },
  {
    name: 'pogo-stick',
    price: 'A MILLION POUNDS'
  },
  {
    name: 'duck',
    price: '100'
  }
]

const popular = [
  'cards', 
  'pogo-stick', 
  'car', 
  'duck'
]

const Popular = () => {
  return [].concat(...popular.map(n => toys.filter(({name}) => name === n)))
}
const Rest = () => toys.filter(({name}) => popular.indexOf(name) === -1)

let ordered = [].concat(...Popular(), ...Rest())

console.log(ordered)

James · Accepted Answer · 2018-08-23 13:59:09Z

You could use a custom sort function

var popularToys = [
    "cards", "pogo-stick"
]

var data = {
  "toys": [
    {
      "name": "car",
      "price": "10"
    },
    {
      "name": "duck",
      "price": "25"
    },
    {
      "name": "pogo-stick",
      "price": "60"
    },
    {
      "name": "cards",
      "price": "5"
    }
  ]
};

function popularFirst(a, b) {
  var aIsPopular = popularToys.indexOf(a.name) > -1;
  var bIsPopular = popularToys.indexOf(b.name) > -1;
 
  if (aIsPopular) {
    // b could be popular or not popular, a still comes first
    return -1;
  } else if (bIsPopular) {
    // a isnt popular but b is, change the order
    return 1;
  } else {
    // no change
    return 0;
  }
}

console.log(data.toys.sort(popularFirst));

niclas_4 · Accepted Answer · 2018-08-23 11:39:00Z

-2

    function compare(a,b) {
      if (a.name < b.name)
         return -1;
      if (a.name > b.name)
         return 1;
    return 0;
    }

toys.sort(compare);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

answered Aug 23, 2018 at 11:39

niclas_4

3,6761 gold badge24 silver badges51 bronze badges

Collectives™ on Stack Overflow

javascript - reorder array of objects depending on property

4 Answers 4

5 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Related