如何在 onClick 上將 isCompleted 屬性更新為true。我只能從路由訪問 moduleContent id，例如“id”：“cr1mod1content1”。如何通過僅匹配此 ID 將 isCompleted 屬性更新為 true。注意：我在這個專案中使用 react/nextJS。這是我的 json 資料結構。
[
{
"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
}
]
}
]
}
]
uj5u.com熱心網友回復：
您可以通過以下方式達到此目的：
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
}
}
考慮到如果您的根 JSON 陣列可能包含多個元素，您將不得不用另一個（根）迭代來包裝回圈。
uj5u.com熱心網友回復：
您可以使用陣列的 some()進行檢查和更新
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)uj5u.com熱心網友回復：
您可以使用地圖兩次更新
data[0].modules.map(item => item.moduleContent.map(obj => {
if (obj.id === "cr1mod1content1") {
obj.isCompleted = true
}
}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/483568.html
標籤：javascript 数组 目的 嵌套对象