How to change order of the specific object in react JS

Question

I have buttons that are coming from API.

This is my buttons array output.

0: {uploaded: "User", id: 1, status: "A1"}
1: {uploaded: "User", id: 2, status: "A2"}
2: {uploaded: "User", id: 3, status: "A3"}
3: {uploaded: "User", id: 4, status: "A4"}
4: {uploaded: "User", id: 5, status: "A5"}
5: {uploaded: "User", id: 6, status: "A6"}



this is how I am mapping..

{buttons?.map((item) => (
    <Button
        outline
        key={item.id}
        disabled={isDisabled(item, status)}
        onClick={onTap.bind(null, item)}
        className={`statusName`}
    >
        {item.status}
    </Button>
))}

Now I have a requirement when status named status: "A6" is available in API response I need to show the order of my buttons as A1 A6 A2 A3 A4 A5 when status: "A6" not available in API response I need to show the order of my buttons as is not available A1 A2 A3 A4 A5. How I can change the order sorting based on status: "A6" value.

Do you mean, whether or not it's included in the response? Why not just sort your array, then search for the "A6" status and move that element in the array? Is the response data already sorted? Can you make your backend return the order you prefer? — Drew Reese
– Drew Reese, Commented Jul 9, 2021 at 9:28
find the item in the original array, then filter it out. then splice it to the index you want, is it not working for you for some reason? — ilkerkaran
– ilkerkaran, Commented Jul 9, 2021 at 9:28

Apostolos · Accepted Answer · 2021-07-09 10:09:44Z

1

You can check if A6 is present and based on this use splice method to costruct new array

export default function App() {
  let data = [
    { uploaded: "User", id: 1, status: "A1" },
    { uploaded: "User", id: 2, status: "A2" },
    { uploaded: "User", id: 3, status: "A3" },
    { uploaded: "User", id: 4, status: "A4" },
    { uploaded: "User", id: 5, status: "A5" },
    { uploaded: "User", id: 6, status: "A6" }
  ];

  let a6Idx = data.findIndex((obj) => obj.status === "A6");
  let newData = JSON.parse(JSON.stringify(data));
  if (a6Idx >= 0) {
    newData.splice(a6Idx);
    newData.splice(1, 0, data[a6Idx]);
  }

  return (
    <div>
      {newData.map((obj, idx) => (
        <button key={obj.id}>{obj.status}</button>
      ))}
    </div>
  );
}

sandbox

edited Jul 9, 2021 at 10:09

answered Jul 9, 2021 at 9:37

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

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

2 Comments

Apostolos Over a year ago

i fixed the hard-coded "5" with the index a6Idx to be 100% correct

Drew Reese Over a year ago

Instead of two splices that remove (and shift) and insert (and shift) you can simply swap the elements at each index, something like [data[a6Idx], data[1]] = [data[1], data[a6Idx]].

Harrison · Accepted Answer · 2021-07-09 09:31:26Z

0

There's a couple of ways you could approach this. Is there a particular reason why "A6" still comes after "A1"?

My method is like so:

Array.prototype.move = function(from, to) {
    this.splice(to, 0, this.splice(from, 1)[0]);
};

var buttonArray = [
  {uploaded: "User", id: 1, status: "A1"},
  {uploaded: "User", id: 2, status: "A2"},
  {uploaded: "User", id: 3, status: "A3"},
  {uploaded: "User", id: 4, status: "A4"},
  {uploaded: "User", id: 5, status: "A5"},
  {uploaded: "User", id: 6, status: "A6"}
]

var a6Index = buttonArray .findIndex(item => item.status === "A6")

// Since Arrays are zero-indexed, move to 1
buttonArray.move(a6Index, 1)
// [
//   {uploaded: "User", id: 1, status: "A1"},
//   {uploaded: "User", id: 6, status: "A6"},
//   {uploaded: "User", id: 2, status: "A2"},
//   {uploaded: "User", id: 3, status: "A3"},
//   {uploaded: "User", id: 4, status: "A4"},
//   {uploaded: "User", id: 5, status: "A5"}
// ]

The nice part about this method is that if "A6" is not in your array, the array order will remain unchanged.

You can then map through your array as normal.

answered Jul 9, 2021 at 9:31

Harrison

2,49512 gold badges24 silver badges48 bronze badges

1 Comment

iOS Coder Over a year ago

Thanks for the solution and your effort. but it's breaking my code.

Collectives™ on Stack Overflow

How to change order of the specific object in react JS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related