使用forEach，map或filter克隆和操作嵌套对象，而无需修改原始对象

Question

I'm trying to get a handle on using .map, .filter to clone and modify a big nested JSON object based on a deeply nested property. With the below code, the original data and the filtered data both end up getting modified, but I'm trying to leave the original data intact. What I'm hoping to do is have the deeply nested concerns array emptied in the final filtered object for a given id, leaving the original data as the original complete data set.

var data {...};

var dataFilter = function dataBuild(data) {
  var newData = data;

  newData.service_requests = newData.service_requests.map((request) => {
    request.concerns = request.concerns.filter((concern) => {
      return concern.building_id == 2
    });
    return request;
  });

    return newData;
};

var filtered = dataFilter(data);

Here's a fiddle with what I'm trying to do with the full object in there. http://jsbin.com/doyoqinoxo/edit?js,console

Answer 1

When you do:

var newData = data;

you are simply making a second reference to the same object, so:

newData.service_requests = ...

overwrites the value in data.service_requests .

It seems you want newData to be a copy of data , not a reference to the same object. There are plenty of posts here on how to copy a nested object (a so–called deep copy), eg What is the most efficient way to clone an object? , but please ignore the accepted answer unless you are using jQuery. Use one of the other answers, like this one .

Answer 2

JSIterator .map() creates the new array with the same number of elements or does not change the original array. There might be the problem with referencing if there is object inside the array as it copies the same reference, so, when you are making any changes on the property of the object it will change the original value of the element which holds the same reference.

The solution would be to copy the object, well, array.Splice() and [...array] (spread Operator) would not help in this case, you can use JavaScript Utility library like Loadash or just use below mention code:

const newList = JSON.parse(JSON.stringify(orinalArr))