How to update nested object property in array by id in javascript?

Question

How can i updated isCompleted property to true on onClick. I can only access moduleContent id from route eg- "id": "cr1mod1content1". How can i update isCompleted property to true by only matching this id. Note: i'm using react/nextJS for this project. here is my json data structure.

[
  {
    "id": 1,
    "progress": 0,
    "title": "Python Basics for Data Science",
    "modules": [
      {
        "id": "cr1mod1",
        "title": "Module 1- Python Basics",
        "moduleContent": [
          {
            "type": "html",
            "id": "cr1mod1content1",
            "title": "Module Introduction and Learning Objectives",
            "content": " <p>      This module teaches the basics of Python and begins  </p>",
            "quizContent": [],
            "isCompleted": false
          },
          {
            "type": "video",
            "id": "cr1mod1content2",
            "title": "Video: Types (3:02)",
            "content": "https://vimeo.com/23",
            "quizContent": [],
            "isCompleted": false
          },
          {
            "type": "quiz",
            "id": "cr1mod1content3",
            "title": "Practice Quiz: Types",
            "content": "",
            "quizContent": [],
            "isCompleted": false
          }
        ]
      },
      {
        "id": "cr1mod2",
        "title": "Module 2 - Python Data Structures",
        "moduleContent": [
          {
            "type": "html",
            "id": "cr1mod2content1",
            "title": "Module Introduction and Learning Objectives",
            "content": " <p>This module begins a journey into Python data structure</p> ",
            "quizContent": [],
            "isCompleted": false
          },
          {
            "type": "video",
            "id": "cr1mod2content2",
            "title": "Video: Types (8:31)",
            "content": "https://vimeo.com/1",
            "quizContent": [],
            "isCompleted": false
          },
          {
            "type": "quiz",
            "id": "cr1mod2content3",
            "title": "Practice Quiz: Types",
            "content": "",
            "quizContent": [],
            "isCompleted": false
          }
        ]
      }
    ]
  }
]

Answer 1

You can reach this in this way:

const arr = declare Your JSON array there
const id = 'cr1mod2content3'
for(const module of arr[0].modules) {
    for(const item of module.moduleContent) {
        if(item.id === id) item.isCompleted = true
    }
}

Take into account that if your root JSON array may contain several elements, you will have to wrap the cycle with one more (root) iteration.

Answer 2

You can use some() of array for checking and update

 const data = [ { "id": 1, "progress": 0, "title": "Python Basics for Data Science", "modules": [ { "id": "cr1mod1", "title": "Module 1- Python Basics", "moduleContent": [ { "type": "html", "id": "cr1mod1content1", "title": "Module Introduction and Learning Objectives", "content": " <p> This module teaches the basics of Python and begins </p>", "quizContent": [], "isCompleted": false }, { "type": "video", "id": "cr1mod1content2", "title": "Video: Types (3:02)", "content": "https://vimeo.com/23", "quizContent": [], "isCompleted": false }, { "type": "quiz", "id": "cr1mod1content3", "title": "Practice Quiz: Types", "content": "", "quizContent": [], "isCompleted": false } ] }, { "id": "cr1mod2", "title": "Module 2 - Python Data Structures", "moduleContent": [ { "type": "html", "id": "cr1mod2content1", "title": "Module Introduction and Learning Objectives", "content": " <p>This module begins a journey into Python data structure</p> ", "quizContent": [], "isCompleted": false }, { "type": "video", "id": "cr1mod2content2", "title": "Video: Types (8:31)", "content": "https://vimeo.com/1", "quizContent": [], "isCompleted": false }, { "type": "quiz", "id": "cr1mod2content3", "title": "Practice Quiz: Types", "content": "", "quizContent": [], "isCompleted": false } ] } ] } ] const updateData = (arr, idFilter) => { arr.some(({modules}) => { modules.some(({moduleContent}) => { moduleContent.some(ele => { if (ele.id === idFilter) { return ele.isCompleted = true } return false }) }) }) } updateData(data, 'cr1mod1content1') console.log(data)

Answer 3

You can use map double times to update

 data[0].modules.map(item => item.moduleContent.map(obj => {
    if (obj.id === "cr1mod1content1") {
        obj.isCompleted = true
    }
}));