My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping

Question

My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping

Here is the object.

 let newObj = {
    firstValue:"abc",
    content:[
      {
        "value": "123",
        "checked": true
      },
      {
        "value": "456",
        "checked": false
      },
      {
        "value": "789",
        "checked": true
      }
    ]
}

In this firstValue is abc so while mapping abc should come first like this:

 let newObj = {
firstValue:"abc",
content:[
  {
    "value": "abc",
    "checked": true
  },
  {
    "value": "123",
    "checked": false
  },
  {
    "value": "789",
    "checked": true
  }
]
}

To achieve this using javascript, you can use a function to rearrange the objects in the array based on the value of 'firstValue' property.

Hope this helps!

javascript arrays

Answer 1

Answer №1

let obj = {
  mainValue: "abc",
  data: [
    {
      val: "def",
      enabled: true,
    },
    {
      val: "ghi",
      enabled: false,
    },
    {
      val: "jkl",
      enabled: true,
    },
  ],
};
const position = obj.data.findIndex((item) => item.val === obj.mainValue);
if (position !== -1 && position !== 0) {
  obj.data.unshift(...obj.data.splice(position, 1));
}

Answer 2

let obj = {
  mainValue: "abc",
  data: [
    {
      val: "def",
      enabled: true,
    },
    {
      val: "ghi",
      enabled: false,
    },
    {
      val: "jkl",
      enabled: true,
    },
  ],
};
const position = obj.data.findIndex((item) => item.val === obj.mainValue);
if (position !== -1 && position !== 0) {
  obj.data.unshift(...obj.data.splice(position, 1));
}

Answer 3

Answer №2

Seems like you're interested in arranging the matching object at the top.

You have a couple of options to achieve this. One way is to utilize Array#sort(), but keep in mind that this will modify the original object, so consider cloning it before sorting if needed.

var arr = { firstValue: 'xyz', content: [ { value: 'abc', checked: true, }, { value: 'xyz', checked: false, }, { value: 'lmn', checked: true, }, ], };

const sorted = [...arr.content].sort((a, b) => 
  (b.value === arr.firstValue) - (a.value === arr.firstValue));

console.log(sorted);

Alternatively, you can identify the index of the object using Array#findIndex(), then use Array#splice() and Array#unshift() to move it to the front of the array. To avoid mutating the original array, create a utility function that returns a copy with the desired changes.

var arr = { firstValue: 'xyz', content: [ { value: 'abc', checked: true, }, { value: 'xyz', checked: false, }, { value: 'lmn', checked: true, }, ], };

const orderFirst = (a) => {
  const res = [...a];
  const i = a.findIndex((o) => o.value === arr.firstValue);
  
  if (i && i !== -1) {
    res.unshift(res.splice(i, 1));
  }

  return res;
};

const sorted = orderFirst(arr.content);

console.log(sorted);

Answer 4

Seems like you're interested in arranging the matching object at the top.

You have a couple of options to achieve this. One way is to utilize Array#sort(), but keep in mind that this will modify the original object, so consider cloning it before sorting if needed.

var arr = { firstValue: 'xyz', content: [ { value: 'abc', checked: true, }, { value: 'xyz', checked: false, }, { value: 'lmn', checked: true, }, ], };

const sorted = [...arr.content].sort((a, b) => 
  (b.value === arr.firstValue) - (a.value === arr.firstValue));

console.log(sorted);

Alternatively, you can identify the index of the object using Array#findIndex(), then use Array#splice() and Array#unshift() to move it to the front of the array. To avoid mutating the original array, create a utility function that returns a copy with the desired changes.

var arr = { firstValue: 'xyz', content: [ { value: 'abc', checked: true, }, { value: 'xyz', checked: false, }, { value: 'lmn', checked: true, }, ], };

const orderFirst = (a) => {
  const res = [...a];
  const i = a.findIndex((o) => o.value === arr.firstValue);
  
  if (i && i !== -1) {
    res.unshift(res.splice(i, 1));
  }

  return res;
};

const sorted = orderFirst(arr.content);

console.log(sorted);

My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping

Answer №1

Answer №2

Similar questions

The GraphQL Resolver function that returns an object

How can I call a Vue component method from a different application?

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

"Utilize the most recent version of Uploadify to easily upload your

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

Removing an element from an array in a Laravel database using AngularJS

What causes TypeScript's ReadonlyArrays to become mutable once they are transpiled to JavaScript?

Creating dynamic routes in express to enable flexible and customizable paths

Implementing fetch within a custom hook to display a loader within a return function

Using Angular and Typescript to implement a switch case based on specific values

Breaking down a intricate JavaScript expression in order to reformat it into a different structure

Matching with Regex beyond the limits

Enhance your data by modifying and updating objects within an array with Mongoose

What are the steps to modify the authorization header of an HTTP GET request sent from a hyperlink <a href> element?

Utilizing the each() method to cycle through multiple unordered lists and concealing any nested list items exceeding a count of 8

Transform an object in javascript to HTML format

The jQuery gallery is experiencing some functionality issues

Creating a modal form with jQuery in ASP.NET

Conceal an element along with its space, then signal the application to show alternative content using React