JavaScript - rearrange array of objects based on specified property

Question

JavaScript - rearrange array of objects based on specified property

I am currently designing a select dropdown input element for a webpage and I want to create a specific 'popular' options group that will be displayed at the top of the dropdown menu.

The data structure I am working with is as follows. I am trying to figure out a way to rearrange the items within the people array based on their names.

For instance, I need to reposition the following items:
pogo-stick from toys[2] -> toys[0]
cards from toys[3] to toys[2]

I have a list of popular toys, which includes:

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

My question is, how can I loop through the array of objects and organize them according to the new order specified?

Sample Data:

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

javascript arrays sorting

Answer 1

Answer №1

Implement a forEach() loop to locate the index of the toy object and then perform a 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);

Answer 2

Implement a forEach() loop to locate the index of the toy object and then perform a 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);

Answer 3

Answer №2

Breaking down the logic using a mix of map and filter allows for a clearer separation into two methods

Popular() filters the toy items based on the name property matching the names in the popular array

Rest() filters the toy items where the name property does not exist in the popular array

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)

Answer 4

Breaking down the logic using a mix of map and filter allows for a clearer separation into two methods

Popular() filters the toy items based on the name property matching the names in the popular array

Rest() filters the toy items where the name property does not exist in the popular array

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)

Answer 5

Answer №3

A custom sorting function can be utilized

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));

Answer 6

A custom sorting function can be utilized

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));

Answer 7

Answer №4

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

toys.sort(sortToys);

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

Answer 8

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

toys.sort(sortToys);

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

JavaScript - rearrange array of objects based on specified property

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can PHP's CURL handle cookies?

Struggling with JQuery to revert an element back to its original position after the mouseout event

Rendering Local HTML with local styling and scripts in React Native Webview

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

An issue arises when ng-pattern fails to recognize a regular expression

Using the express.Router instance for handling errors can be a useful tool in your development

Tips for safely storing JWT in the browser

AngularJS: The delay in updating variable bindings following a REST API call

Utilizing the change function in conjunction with that

Assign a variable to the result of ajax that remains unchanged until it is specifically invoked

What are the steps to generating and sharing 'npm create' scripts?

Exploring the concept of upserting records using the MongoDB $

The socket.io-client could not be located on the running Node.js server

Issues with the execution of Typescript decorator method

Completing online form text entries in WebView without the need for identifying elements

How to search for a value in Firebase database and save it to an HTML table?

Exploring the capabilities of require() in nodeJS

Connecting Angular directive to a controller

How can I get my view to render in node.js/express using XMLHttpRequest()?

Adjust the size of an input field in jquery or javascript based on user input