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

How can i updated isCompleted property to true on onClick. I can only access moduleContent id from route e.g.- "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
          }
        ]
      }
    ]
  }
]

CodePudding user response：

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.

CodePudding user response：

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)