CODEWITHSUNDEEP
javascriptarraysreactjssorting
user4061275
user4061275

Reputation:

Array Re arrange in React js

I have some array objects for listing.

based on the list, if the user clicks the particular list item from the objects,

need to show the particular clicked list item as first.

var list = [
 {
  tradeareaid: "80"
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81"
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82"
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "83"
  tradeareaname: "test4"
 },
 { 
  tradeareaid: "84"
  tradeareaname: "test5"
 },
]

in the list If I selected trade area 83 means I needed the list like below

var list = [
 { 
  tradeareaid: "83"
  tradeareaname: "test4"
 },
 {
  tradeareaid: "80"
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81"
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82"
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "84"
  tradeareaname: "test5"
 },
]

How to achieve this?

Upvotes: 2

Views: 52

Answers (2)

Hemant Parashar
Hemant Parashar

Reputation: 3774

You can get the tradeareaid of the item which is clicked and use the getSortedList function (in a click event handler) to get the new list something like this : 

var list = [
 {
  tradeareaid: "80",
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81",
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82",
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "83",
  tradeareaname: "test4"
 },
 { 
  tradeareaid: "84",
  tradeareaname: "test5"
 },
]

function getSortedList(id){
  const clickedItem = list.find(item=>item.tradeareaid===id)
  const filterdList = list.filter(item=>item.tradeareaid!==id)
  return [clickedItem,...filterdList]
}
const sortedList = getSortedList(list[3].tradeareaid)
console.log({sortedList})

Upvotes: 1

prasanth
prasanth

Reputation: 22490

You need to set some key for sort onclick

var list = [ { tradeareaid: "80", tradeareaname: "test1" }, { tradeareaid: "81", tradeareaname: "test2" }, { tradeareaid: "82", tradeareaname: "test3" }, { tradeareaid: "83", tradeareaname: "test4" }, { tradeareaid: "84", tradeareaname: "test5" }, ]

//if test4 was clicked 

clicked = 3; // index
list.forEach((a, b) => {
  list[b]['key'] = b;
  if (b == clicked) {
    list[b]['key'] = -1;
  }
})

console.log(list.sort((a, b) => a.key - b.key))

Upvotes: 1

Related Questions