How to update nested object array in js?

Question

I need to modify component state which has inner array objects. There is no problem with modifying object array but I'd like to update inner object array value which has action format. It doesn't update the action value as "No Action Needed". What's the wrong with that map() functions? Thanks in advance.

let example_response = {
  data: [
    {
 
      details: [
        {
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:true
    },   {
 
      details: [
        {
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:false
    }
  ]
};
 const newList = example_response.data.map((item) => {
    if (item.isSelected) {
      item.details.map((elem) => {
        if (elem.format === "action") {
          const updatedElem = {
            ...elem,
            value: "No Action Needed"
          };
          return updatedElem;
        }       
      });
    }
    return item;
  });
console.log(newList);

Wand what is your problem/error message ?!

Marc
– Marc

2020-10-23 20:00:53 +00:00
Commented Oct 23, 2020 at 20:00 — Marc
– Marc, Commented Oct 23, 2020 at 20:00

Cedric Cholley · Accepted Answer · 2020-10-23 20:02:33Z

I found 2 problems:

You are not modifying item.details (you are just mapping it).
You only return updatedElem when elem.format === "action" but you're returning anything otherwise

Try

let example_response = {
  data: [{

    details: [{
        format: "date",
        value: "2020-04-29T15:03:44.871Z",
        title: "Date"
      },
      {
        format: "action",
        value: "-",
        title: "Action"
      }
    ],
    id: 13409,
    isSelected: true
  }, {

    details: [{
        format: "date",
        value: "2019-04-29T15:03:44.871Z",
        title: "Date"
      },
      {
        format: "action",
        value: "-",
        title: "Action"
      }
    ],
    id: 13409,
    isSelected: false
  }]
};
const newList = example_response.data.map((item) => {
  if (item.isSelected) {
    item.details = item.details.map((elem) => {
      if (elem.format === "action") {
        elem.value = "No Action Needed";
      }
      return elem;
    });
  }
  return item;
});
console.log(newList);

Emiel Zuurbier · Accepted Answer · 2020-10-23 20:05:13Z

Since you're already creating a new array with the top level map method, you can use forEach and assign the value.

let example_response = {
  data: [
    {
 
      details: [
        {
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:true
    },   {
 
      details: [
        {
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:false
    }
  ]
};

const newList = example_response.data.map((item) => {
  if (item.isSelected) {
    item.details.forEach((elem) => {
      if (elem.format === "action") {
        elem.value = "No Action Needed";
      }       
    });
  }
  return item;
});

console.log(newList);

IvanD · Accepted Answer · 2020-10-24 23:02:44Z

let example_response = {
  data: [{
      details: [{
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected: true
    },
    {
      details: [{
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected: false
    }
  ]
};
const newList = example_response.data.map(item => item.isSelected
  ? item.details.map(elem => elem.format === "action"
    ? ({ ...elem, value: "No Action Needed" })
    : elem)
  : item.details);
  
console.log(newList);

Matheus Deister Veiga · Accepted Answer · 2020-10-23 20:16:47Z

Your code does not return a modified item, it just maps over the details when the item is selected. Make sure you are returning something in else clauses too. Here's an example using shorthand notation:

const elementUpdater = (element) => element.format === 'action' ? {...element, value: 'No action needed'} : element
const itemDetailsUpdater = (item) => item.isSelected ? item.details.map(elementUpdater) : item

example_response.data.map(itemDetailsUpdater)

Which yields:

[
    [
        {
            "format": "date",
            "value": "2020-04-29T15:03:44.871Z",
            "title": "Date"
        },
        {
            "format": "action",
            "value": "No action needed",
            "title": "Action"
        }
    ],
    {
        "details": [
            {
                "format": "date",
                "value": "2019-04-29T15:03:44.871Z",
                "title": "Date"
            },
            {
                "format": "action",
                "value": "-",
                "title": "Action"
            }
        ],
        "id": 13409,
        "isSelected": false
    }
]

Collectives™ on Stack Overflow

How to update nested object array in js?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related