How to change data in a nested JSON by javascript lodash

Question

for example, i have a JSON file like this

{
  "employees": [
    { "name": "Ram", "email": "[email protected]", "age": 23 },
    { "name": "Shyam", "email": "[email protected]", "age": 28 },
    { "name": "John", "email": "[email protected]", "age": 33 },
    { "name": "Bob", "email": "[email protected]", "age": 33 }
  ]
}

Now i want to create a new array that same as this, but modded specific value, like if age is 33 then change to 1, like

{
  "employees": [
    { "name": "Ram", "email": "[email protected]", "age": 23 },
    { "name": "Shyam", "email": "[email protected]", "age": 28 },
    { "name": "John", "email": "[email protected]", "age": 1 },
    { "name": "Bob", "email": "[email protected]", "age": 1 }
  ]
}

How can i do this with lodash or javascript array ? Thank you guy a lots

Since you've tagged the question with React, does this answer your question? [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Sep 15 '21 at 03:21

score 3 · Accepted Answer · answered Sep 15 '21 at 01:45

In order to create a new array you need to take care not to modify the existing elements of the array. You can do this in a number of ways, however because your data is multiple levels, using functions like Array.map() or the Spread operator (...) can be problematic. You need to copy the data first. One way is using JSON.stringify() and JSON.parse() to create the copy, then modify it using an Array maniulation method (.map(), .reduce(), .forEach(), etc) to modify the data.

var data = {
  employees: [
    { name: "Ram", email: "[email protected]", age: 23 },
    { name: "Shyam", email: "[email protected]", age: 28 },
    { name: "John", email: "[email protected]", age: 33 },
    { name: "Bob", email: "[email protected]", age: 33 }
  ]
}

var copy = JSON.parse(JSON.stringify(data))
copy.employees.map( elem => { elem.age = elem.age==33?1:elem.age; return elem } )
console.log(copy)

It's unclear if OP uses React or not, but if he is, the JSON parsing trick is a bad practice as it would cause a re-render of everything instead of just the changed elements. — Emile Bergeron, Sep 15 '21 at 03:26

score 0 · Answer 2 · answered Sep 15 '21 at 01:48

Map is the good way to do it, but if it is nested somewhere in an object you can also add the spread operator:

const object = { 
  employees: [
    { name: "Ram", email: "[email protected]", age: 23 },
    { name: "Shyam", email: "[email protected]", age: 28 },
    { name: "John", email: "[email protected]", age: 33 },
    { name: "Bob", email: "[email protected]", age: 33 },
  ]
}
const employees = object.employees.map((employee) => {
  employee.age = employee.age === 33 ? 1 : employee.age; 
  return employee
})
const newObject = {
  ...object,
  employees: employees
}

console.log(newObject)

Your map function is copying object references into the new array, not a new object. It's mutating the original object. Spread also has this behavior since it is also a shallow copy — Tibrogargan, Sep 15 '21 at 01:53

Micahel Hamami · Answer 3 · 2021-09-15T02:09:30.743

-1

as @Tibrogargan mentioned this answer is not good if you need to do a deep copy because map function doing a shallow copy more about that and more ways to do deep copy you can see here https://javascript.plainenglish.io/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089#:~:text=4.,objects%20are%20not%20actually%20cloned.

it might be not good for you Please check Tibrogargan answer

you can use map method of Javascript

  let data = {
    employees: [
      { name: "Ram", email: "[email protected]", age: 23 },
      { name: "Shyam", email: "[email protected]", age: 28 },
      { name: "John", email: "[email protected]", age: 33 },
      { name: "Bob", email: "[email protected]", age: 33 },
    ],
  };
  let newArray = data.employees.map((emp) => {
    if (emp.age == 33) emp.age = 1;
    return emp;
  });
  console.log(newArray);

more about map function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

edited Sep 15 '21 at 02:09

answered Sep 15 '21 at 01:09

Micahel Hamami

179
1
10

Thank for your answer, but in my nested array, it not work, but i upvoted btw – Lê Quốc Khánh Sep 15 '21 at 01:32
1

check my edited code. if it still not working please post your full code , I will glad to help :) Thanks for the vote :) – Micahel Hamami Sep 15 '21 at 01:55
1

This does not create a new array. The `employees` element is an array of objects,`.map()` creates a new array but it still just copies the references from the old array. This results in your code mutating `data` – Tibrogargan Sep 15 '21 at 01:56
thats true ! I will edit my answer so people will notice that. – Micahel Hamami Sep 15 '21 at 02:05

How to change data in a nested JSON by javascript lodash

3 Answers3