What is the best way to compare two arrays of data and make changes?

Question

What is the best way to compare two arrays of data and make changes?

I am working with two arrays, array A and array B

Here is how they look:

A:

[11, 14]

B:

[
  { title: 'title 1', data: [ { node_id: 11, selected: false }, { node_id: 14, selected: false } ]},
  { title: 'title 2', data: [ { node_id: 70, selected: false } ]}
]

This is the code I have written:

B.map((value) => {
  A.map((selectedDeviceId) => {
    value.data.map((valueData) => {
      selectedDeviceId === valueData.node_id
        ? (valueData.selected = true)
        : (valueData.selected = false);
    });
  });
});

However, when I check the B array, the output is:

[
  { title: 'title 1', data: [ { node_id: 11, selected: false }, { node_id: 14, selected: true } ]},
  { title: 'title 2', data: [ { node_id: 70, selected: false } ]}
]

I expected it to be:

[ { node_id: 11, selected: true }, { node_id: 14, selected: true } ]

Can you spot what's wrong in my code?

javascript arrays

Answer 1

Answer №1

One way to achieve the desired result is by utilizing the Array.prototype.flatMap() function along with the Array.prototype.filter() method. By iterating through the array using flatMap and then applying the filter method alongside Array.prototype.some(), you can effectively filter out the node_ids.

const number = [11, 14];
const data = [
  {
    title: 'title 1',
    data: [
      { node_id: 11, selected: false },
      { node_id: 14, selected: false },
    ],
  },
  { title: 'title 2', data: [{ node_id: 70, selected: false }] },
];

const ret = data.flatMap((x) =>
  x.data.filter((y) => number.some((z) => z === y.node_id))
);
console.log(ret);

Answer 2

One way to achieve the desired result is by utilizing the Array.prototype.flatMap() function along with the Array.prototype.filter() method. By iterating through the array using flatMap and then applying the filter method alongside Array.prototype.some(), you can effectively filter out the node_ids.

const number = [11, 14];
const data = [
  {
    title: 'title 1',
    data: [
      { node_id: 11, selected: false },
      { node_id: 14, selected: false },
    ],
  },
  { title: 'title 2', data: [{ node_id: 70, selected: false }] },
];

const ret = data.flatMap((x) =>
  x.data.filter((y) => number.some((z) => z === y.node_id))
);
console.log(ret);

Answer 3

Answer №2

An efficient method of achieving the task.

const A = [11, 14];

const B = [{
    title: 'title 1',
    data: [{
      node_id: 11,
      selected: false
    }, {
      node_id: 14,
      selected: false
    }]
  },
  {
    title: 'title 2',
    data: [{
      node_id: 70,
      selected: false
    }]
  }
]
const updatedList = B.map((_b) => {
  return { ..._b,
    data: _b.data.map(_d => {
      return { ..._d,
        selected: A.includes(_d.node_id)
      }
    })
  }
})
console.log(updatedList)

Answer 4

An efficient method of achieving the task.

const A = [11, 14];

const B = [{
    title: 'title 1',
    data: [{
      node_id: 11,
      selected: false
    }, {
      node_id: 14,
      selected: false
    }]
  },
  {
    title: 'title 2',
    data: [{
      node_id: 70,
      selected: false
    }]
  }
]
const updatedList = B.map((_b) => {
  return { ..._b,
    data: _b.data.map(_d => {
      return { ..._d,
        selected: A.includes(_d.node_id)
      }
    })
  }
})
console.log(updatedList)

Answer 5

Answer №3

const integers = [11, 14];
const objects = [
  { title: 'title 1', data: [ { node_id: 11, selected: false }, { node_id: 14, selected: false } ]},
  { title: 'title 2', data: [ { node_id: 70, selected: false } ]}
];

objects.forEach(obj => {
  integers.forEach(id => {
    const foundObject = obj.data.find(item => item.node_id === id);
    if (foundObject) {
      foundObject['selected'] = true;
    }
  });
});

console.log(objects);

Answer 6

const integers = [11, 14];
const objects = [
  { title: 'title 1', data: [ { node_id: 11, selected: false }, { node_id: 14, selected: false } ]},
  { title: 'title 2', data: [ { node_id: 70, selected: false } ]}
];

objects.forEach(obj => {
  integers.forEach(id => {
    const foundObject = obj.data.find(item => item.node_id === id);
    if (foundObject) {
      foundObject['selected'] = true;
    }
  });
});

console.log(objects);

Answer 7

Answer №4

After reviewing @mr hr's solution, it seems that the ternary operation in your code could use some adjustments. Consider revising it as follows:

B.map((value) => {
    A.map((selectedDeviceId) => {
        value.data.map((valueData) => {
          if(selectedDeviceId === valueData.node_id){
            valueData.selected = true;
          }
        });
    });
});

Answer 8

After reviewing @mr hr's solution, it seems that the ternary operation in your code could use some adjustments. Consider revising it as follows:

B.map((value) => {
    A.map((selectedDeviceId) => {
        value.data.map((valueData) => {
          if(selectedDeviceId === valueData.node_id){
            valueData.selected = true;
          }
        });
    });
});

Answer 9

Answer №5

The mistake lies in the misuse of the map() function, rather than properly utilizing the results. The correct syntax should be:

.map(value => {return something;})

or .map(value => something)

Situations where map() should not be used

Since map creates a new array, it is considered an anti-pattern to use it when the returned array is not being utilized; instead, consider using forEach or for-of.

Source

Answer 10

The mistake lies in the misuse of the map() function, rather than properly utilizing the results. The correct syntax should be:

.map(value => {return something;})

or .map(value => something)

Situations where map() should not be used

Since map creates a new array, it is considered an anti-pattern to use it when the returned array is not being utilized; instead, consider using forEach or for-of.

Source

What is the best way to compare two arrays of data and make changes?

Answer №1

Answer №2

An efficient method of achieving the task.

Answer №3

Answer №4

Answer №5

Similar questions

Shadow and Quality Issues with SVG Images

How to implement file uploading with Node.js and Angular using the formidable module

Utilizing Vue.js: Dynamically linking v-model to route parameters depending on the current state

Playing Tic Tac Toe - How to prevent displaying results when an invalid move is made

Exploring the depths of Vue.js: Maximizing potential with nested

Associating the object key and value with distinct attributes within the component

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

How can I effectively handle a JSON string list when receiving data from an AJAX call?

Combining arrays in Numpy with identical rows but varying columns

"Encountering a 404 error in a JQuery Ajax POST request when trying to send

Is the Facebook AJAX Permissions Dialog displayed outside of a Pop-Up?

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Animation triggered when removing items from a filtered list using ng-repeat

transferring a string parameter from PHP to a JavaScript function

Ways to update the state of an array without clearing the existing array items

Transforming an Angular 11 HTML template into Angular code

Guide on building a Dynamic factory in AngularJS

Ember JS: Master of Controlling

Is it possible for a beginner like me in Node.js to incorporate external npm packages into Express.js and React.js?

Utilizing numerous X-axis data points in highcharts