Traverse through an object and set a value to an array of objects only when specific criteria are satisfied - vanilla JavaScript

Question

Traverse through an object and set a value to an array of objects only when specific criteria are satisfied - vanilla JavaScript

Consider having an object structured as shown below, with multiple items:

myObject:{
 item1: {
  visible: true;
 },
 item2: {
  visible: true;
 },
 item3: {
  visible: false;
 },
}

Additionally, there is an array of objects as follows, with potentially numerous items:

var objs = [ 
    { name: 'item1', visible: false },
    { name: 'item2', visible: false },
    { name: 'item3', visible: false }
];

The challenge is to loop through the object and update the visibility in the array only if the identifiers match. For instance, when item1's visibility is false in the object, it must also be updated in the corresponding item1 within the array.

javascript arrays object lodash

Answer 1

Answer №1

To efficiently process the array, iterate through it just once.

const myObject = {
 item1: {
  visible: true
 },
 item2: {
  visible: true
 },
 item3: {
  visible: false
 }
};


var objs = [ 
    { name: 'item1', visible: false },
    { name: 'item2', visible: false },
    { name: 'item3', visible: false }
];

objs.forEach(obj => {
  const property = myObject[obj.name];
  if (property) {
    obj.visible = property.visible;
  }
});


console.log(objs);

Answer 2

To efficiently process the array, iterate through it just once.

const myObject = {
 item1: {
  visible: true
 },
 item2: {
  visible: true
 },
 item3: {
  visible: false
 }
};


var objs = [ 
    { name: 'item1', visible: false },
    { name: 'item2', visible: false },
    { name: 'item3', visible: false }
];

objs.forEach(obj => {
  const property = myObject[obj.name];
  if (property) {
    obj.visible = property.visible;
  }
});


console.log(objs);

Answer 3

Answer №2

Iterate through each element in myObject, and locate the corresponding object in objs using the find method, then update the value of that specific object:

for (let o in myObject) {
  let obj = objs.find(i => i.name == o)
  if(!obj) continue
  obj.visible = myObject[o].visible
}

Check out this functional demonstration:

const myObject = {
 item1: {
  visible: true
 },
 item2: {
  visible: true
 },
 item3: {
  visible: false
 }
}

var objs = [ 
    { name: 'item1', visible: false },
    { name: 'item2', visible: false },
    { name: 'item3', visible: false }
]

for (let o in myObject) {
  let obj = objs.find(i => i.name == o)
  if(!obj) continue
  obj.visible = myObject[o].visible
}

console.log(objs)

Answer 4

Iterate through each element in myObject, and locate the corresponding object in objs using the find method, then update the value of that specific object:

for (let o in myObject) {
  let obj = objs.find(i => i.name == o)
  if(!obj) continue
  obj.visible = myObject[o].visible
}

Check out this functional demonstration:

const myObject = {
 item1: {
  visible: true
 },
 item2: {
  visible: true
 },
 item3: {
  visible: false
 }
}

var objs = [ 
    { name: 'item1', visible: false },
    { name: 'item2', visible: false },
    { name: 'item3', visible: false }
]

for (let o in myObject) {
  let obj = objs.find(i => i.name == o)
  if(!obj) continue
  obj.visible = myObject[o].visible
}

console.log(objs)

Answer 5

Answer №3

const objectData = {
 item1: {
  active: true
 },
 item2: {
  active: true
 },
 item3: {
  active: false
 }
};


var items = [ 
    { name: 'item1', active: false },
    { name: 'item2', active: false },
    { name: 'item3', active: false }
];

Object.getOwnPropertyNames(objectData).forEach(property => {
  let item = items.find(i => i.name === property);
  if (item) {
    item.active = objectData[property].active;
  }
});

console.log(items);

Answer 6

const objectData = {
 item1: {
  active: true
 },
 item2: {
  active: true
 },
 item3: {
  active: false
 }
};


var items = [ 
    { name: 'item1', active: false },
    { name: 'item2', active: false },
    { name: 'item3', active: false }
];

Object.getOwnPropertyNames(objectData).forEach(property => {
  let item = items.find(i => i.name === property);
  if (item) {
    item.active = objectData[property].active;
  }
});

console.log(items);

Traverse through an object and set a value to an array of objects only when specific criteria are satisfied - vanilla JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

Is there a method to prevent data loss on page refresh by persisting data stored in a database?

Function cannot be executed through the onchange event handler

What steps can be taken to avoid children components from re-rendering every time the parent component's state or props change

Combining two functions in JavaScript to target the same div: a simple guide

jQuery Alert for Double-Checking Email Entry

Is there a way to transfer CSS classes to React children and guarantee they take precedence over the child's own class styles?

Steps for preventing a button from being enabled until all mandatory fields are completed

Transforming various date formats into the en-US format of mm/dd/yyyy hh:mm:ss can be accomplished through JavaScript

hold on for the arrays to be populated with data from the ajax calls

Guide on embedding PHP/MYSQL array into an independent JavaScript document

Is there a way to send a boolean to a directive and activate a function when that boolean is altered, all without using $watch?

A guide to storing a JavaScript variable in a MySQL database using Express.js

Difficulty building due to uppercase import in NPM dependency

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

Analyzing the latest "barchart.com" website

Iterate through an array, mapping the values and then returning a

What is the process by which browsers manage AJAX requests when they are made across

Analyzing differences between arrays in Perl

How can I properly implement a Closure or IIFE to manage an onclick event in ReactJS?