Assign a property to an array of objects depending on the presence of a value in a separate array

Question

Assign a property to an array of objects depending on the presence of a value in a separate array

Looking to manipulate arrays? Here's a task for you:

const arrayToCheck = ['a', 'b', 'c', 'd'];

We have the main array as follows:

const mainArray = [ {name:'alex', code: 'c'}, 
                    {name:'jack', code: 'd'}, 
                    {name:'john', code: 'n'}, 
                    {name:'mike', code: 'l'}
                  ]

The goal is to update the mainArray with a 'status' property, either 'enable' or 'disable', based on values in arrayToCheck.

Expected output:

[ {name:'alex', code: 'c', status: 'enable'}, 
  {name:'jack', code: 'd', status: 'enable'}, 
  {name:'john', code: 'n', status: 'disable'}, 
  {name:'mike', code: 'l', status: 'disable'}
]

An attempt using map and some methods to achieve this was made:

const output = this.mainArray.map( (fil, i) => {
          return arrayToCheck.some( s => {
            if (s === fil.Code) {
              this.mainArray[i].Status = 'enable'
            } else {
              this.mainArray[i].Status = 'disable'
            }
          })
        });

javascript typescript ecmascript-6

Answer 1

Answer №1

One way to achieve this is by utilizing the map method along with includes and spread syntax .... By doing so, a fresh array of objects is generated without altering the original array.

const itemsToCheck = ['a', 'b', 'c', 'd'];
const primaryArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}]

const updatedResult = primaryArray.map(item => ({...item, status: itemsToCheck.includes(item.code) ? "enable" : "disable"}))
console.log(updatedResult)

Answer 2

One way to achieve this is by utilizing the map method along with includes and spread syntax .... By doing so, a fresh array of objects is generated without altering the original array.

const itemsToCheck = ['a', 'b', 'c', 'd'];
const primaryArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}]

const updatedResult = primaryArray.map(item => ({...item, status: itemsToCheck.includes(item.code) ? "enable" : "disable"}))
console.log(updatedResult)

Answer 3

Answer №2

Here are a few things to consider:

Remember that JavaScript is case-sensitive. This means that Code and code are treated as different properties.
If you are not returning anything from your map callback function, then using a loop or forEach might be more appropriate than map.
Instead of running an if statement inside the some function's callback, consider utilizing the return value of some. In your case, using includes may serve the same purpose without needing some.

If your objective is to modify the existing objects in the array, rather than creating new ones, you can follow this example:

const arrayToCheck = ['a', 'b', 'c', 'd'];

const mainArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}];

mainArray.forEach(entry => {
    entry.status = arrayToCheck.includes(entry.code) ? "enable" : "disable";
});

console.log(mainArray);

If your intention is to create new objects, refer to Nenad's answer for guidance on how to do so. However, based on your question, it seems like modifying existing objects was your goal.

Answer 4

Here are a few things to consider:

Remember that JavaScript is case-sensitive. This means that Code and code are treated as different properties.
If you are not returning anything from your map callback function, then using a loop or forEach might be more appropriate than map.
Instead of running an if statement inside the some function's callback, consider utilizing the return value of some. In your case, using includes may serve the same purpose without needing some.

If your objective is to modify the existing objects in the array, rather than creating new ones, you can follow this example:

const arrayToCheck = ['a', 'b', 'c', 'd'];

const mainArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}];

mainArray.forEach(entry => {
    entry.status = arrayToCheck.includes(entry.code) ? "enable" : "disable";
});

console.log(mainArray);

If your intention is to create new objects, refer to Nenad's answer for guidance on how to do so. However, based on your question, it seems like modifying existing objects was your goal.

Answer 5

Answer №3

Check out this simple code snippet:

    const arrayToCheck = ['a', 'b', 'c', 'd'];
    const mainArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}]    
    const output = mainArray.map(obj => {
            obj.status = arrayToCheck.indexOf(obj.code) < 0 ? 'disable' : 'enable';
            return obj;
        })
    console.log(output);

Answer 6

Check out this simple code snippet:

    const arrayToCheck = ['a', 'b', 'c', 'd'];
    const mainArray = [ {name:'alex', code: 'c'}, {name:'jack', code: 'd'}, {name:'john', code: 'n'}, {name:'mike', code: 'l'}]    
    const output = mainArray.map(obj => {
            obj.status = arrayToCheck.indexOf(obj.code) < 0 ? 'disable' : 'enable';
            return obj;
        })
    console.log(output);

Assign a property to an array of objects depending on the presence of a value in a separate array

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to activate and change the color of a Radio Button when it is clicked?

Guide to refining a JSON array using a pre-established list

Vue's v-on:click feature stops functioning correctly post-build

Is there a mistake in the TypeScript guide for custom typography in MUI5?

Issue with the AngularJS build in Yeoman

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Application fails to launch after disabling unsafe-eval in the restricted Content Security Policy settings

The function does not provide an output of an Object

Executing `removeChild` within a timeout during page load does not yield the expected results

Ajax is coming back with a value that is not defined

Issue encountered with the openpgpjs example: `'The function openpgp.encrypt is not defined'`

What is the best way to retrieve the final value stored?

Error in TypeScript: Objects can only specify properties that are known, and 'state' is not found in type 'Partial<Path>'

Issue with displaying the Bootstrap-select DropDownList

Utilizing CodeIgniter for Efficient AJAX Posting

Develop a personalized conditional rendering directive in Vue.js

Enhanced string key indexer type safety in TypeScript

Can a value be concealed within a dropdown list on a form (using PHP or JavaScript)?

Create a form with Vue that generates input fields based on JSON data and

The 'import type' declaration cannot be parsed by the Babel parser