How to change property value under nested array of objects in javascript

Question

I want to the update the object of id 21, make reply to false.

const arr = [ {id: 1, comment:'parent 01', parentId:null, reply:true, children:[{id: 11, comment:'child', reply:true, parentId:1, children:[{id: 21, comment:'super child ', reply:true,parentId:11 }] }] }, {id: 2, comment:'parent 02', reply:true, parentId:null } ]

result should be:

const arr = [ {id: 1, comment:'parent 01', parentId:null, reply:true, children:[{id: 11, comment:'child', reply:true, parentId:1, children:[{id: 21, comment:'super child ', reply:false,parentId:11 }] }] }, {id: 2, comment:'parent 02', reply:true, parentId:null } ]

[ 
{id: 1, comment:'parent 01', reply:true,parentId:null},
{id: 11, comment:'child', reply:true, parentId:1},
{id: 21, comment:'super child', reply:true, parentId:11},
{id: 2, comment:'parent 02', reply:true, parentId:null},
]

function to make this nested array:

function nestComments(commentList) {
  const commentMap = {};

  // move all the comments into a map of id => comment
  commentList.forEach(comment => commentMap[comment.id] = comment);

  // iterate over the comments again and correctly nest the children
  commentList.forEach(comment => {
    if(comment.parentId !== null) {
      const parent = commentMap[comment.parentId];
      (parent.children = parent.children || []).push(comment);
    }
  });

  // filter the list to return a list of correctly nested comments
  return commentList.filter(comment => {
    return comment.parentId === null;
  });
}

What is your required condition to update that object?

Nick Vu
– Nick Vu

2022-11-05 06:49:36 +00:00
Commented Nov 5, 2022 at 6:49 — Nick Vu
– Nick Vu, Commented Nov 5, 2022 at 6:49
make id:21 reply value to false : { id: 21 reply:false}

Asif Kaif
– Asif Kaif

2022-11-05 06:51:51 +00:00
Commented Nov 5, 2022 at 6:51 — Asif Kaif
– Asif Kaif, Commented Nov 5, 2022 at 6:51

Pankti Shah · Accepted Answer · 2022-11-05 07:00:18Z

3

You should use recursion concept here

  function changeData(arr,id){
        arr.forEach((ar)=>{
            if(ar.id==id){
                ar.reply=false;
            }
            if(ar && ar.children && ar.children.length>0){
                changeData(ar.children,id);
            }
        })
        return arr;
    }

answered Nov 5, 2022 at 7:00

Pankti Shah

1608 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pankti Shah Over a year ago

Don't forget to mark the accepted answer

Dmitriy Zhiganov · Accepted Answer · 2022-11-05 07:35:13Z

1

Solution with stack:

const update = (arr, id, key, value) => {
  let i = 0;
  let stack = [arr[i]];

  while (stack.length && stack[0]) {
    let current = stack.pop();

    if (current.id === id) {
      current[key] = value;
      break;
    } else {
      if (current.children && current.children.length) {
        stack = [...stack, ...current.children];
      } else {
        stack.push(arr[i++]);
      }
    }
  }
};

update(arr, 21, "reply", "NEW VALUE");

answered Nov 5, 2022 at 7:35

Dmitriy Zhiganov

1,1371 gold badge7 silver badges15 bronze badges

Comments

Weam Adel · Accepted Answer · 2022-11-05 08:26:15Z

You can use one of the solutions above if you know that the level of nesting is 2, but if the children may have other children i.e. unknown level of nesting, you may use the next recursive solution.

/**
   * @description Recursively finds and updates reply state of the passed comment id.
   * @typedef {{
   *    id: number,
   *    parentId: number | null,
   *    reply: boolen,
   *    comment: string,
   *    children?: Comment[]
   * }} Comment
   * @param {Comment[] | undefined} comments
   * @param {number} id
   * @param {boolean} state
   * @return {Comment | undefined}
   */
   function updateCommentReplyState(comments, id, state) {
      if (!comments) {
        return;
      }

     for (let comment of comments) {
        if (comment.id === id) {
          // We've found the id, then update its reply state then
          // return the comment, and do not search the children.
          comment.reply = state;
          return comment;
        }

        // Recursively search each child
        return updateCommentReplyState(comment.children, id, state);
     }
  }

Collectives™ on Stack Overflow

How to change property value under nested array of objects in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related