如何使用 javascript 中的數組值更改數組 object 中的屬性值

Question

如何根據 javascript 中的值數組更改 object 數組中的屬性，

我有 object obj和參數作為list ，如果標題與 javascript 中的列表匹配，則應將屬性checked更改為 true

如果標題與列表匹配並且有子項，則檢查：true 即。 countries title is matched with list, then children also change the property checked: true

如果子標題匹配，則更改已檢查：僅適用於該 object 即。 clothes title is matched with list, then change the property checked: true於該 object

我堅持使用 arrays 列表作為參數，

 var obj = [{ title: "Sample", checked: false, children: [{ title: "products", checked: false, children: [{ title: "clothes", id: 1, checked: false }, { title: "electronics", id: 2, checked: false } ] }, { title: "countries", checked: false, children: [{ title: "IN", id: 1, checked: false }, { title: "TH", id: 2, checked: false } ] } ] }]; var list = ["clothes", "countries"];

預期 Output：

[{
    title: "Sample",
    checked: false,
    children: [
    {
    title: "products", 
    checked: false,
    children: [
        {title: "clothes", id: 1, checked: true},
        {title: "electronics", id: 2, checked: false}
      ]
    },{
    title: "countries", 
    checked: true,
    children: [
        {title: "IN", id: 1, checked: true},
        {title: "TH", id: 2, checked: true}
      ]
    }
    ]
  }]

Answer 1

您需要一些遞歸來處理任何深度的嵌套：

使用此解決方案，它非常通用，您可以更改 childrenProp、matchProp、checkedProp 等，它可以讓您在嵌套結構中搜索盡可能多的深度。

 const obj = [ { title: "Sample", checked: false, children: [ { title: "products", checked: false, children: [ {title: "clothes", id: 1, checked: false}, {title: "electronics", id: 2, checked: false} ] }, { title: "countries", checked: false, children: [ {title: "IN", id: 1, checked: false}, {title: "TH", id: 2, checked: false} ] } ] } ]; var list=["clothes", "countries"]; checkPropertyForMatch(obj, list); console.log(obj); checkPropertyForMatch(obj, ['electronics']); console.log(obj); function checkPropertyForMatch(inputArr, matchList, matchProp, childrenProp, checkedProp){ //default params, or they can be overwritten: matchProp = matchProp || 'title'; childrenProp = childrenProp || 'children'; checkedProp = checkedProp || 'checked'; innerRecursive(inputArr, matchList); //recursively search the nested object: function innerRecursive(currArr, list){ for (item of currArr){ if ( list.includes(item[matchProp]) ){ item[checkedProp] = true; if (item[childrenProp]){ //this parent matched, so mark all children as marked too: markAllChildrenChecked(item[childrenProp]); } } else { item[checkedProp] = false; if (item[childrenProp]) { //it didn't match but it has children, so search them too: innerRecursive(item[childrenProp], list) } } } } //this recursively marks all children as checked = true: function markAllChildrenChecked(currArr){ for (item of currArr){ item[checkedProp] = true; if (item[childrenProp]){ markAllChildrenChecked(item[childrenProp]); } } } }

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Output：

[
  {
    "title": "Sample",
    "checked": false,
    "children": [
      {
        "title": "products",
        "checked": false,
        "children": [
          {"title": "clothes", "id": 1, "checked": true},
          {"title": "electronics", "id": 2, "checked": false}
        ]
      },
      {
        "title": "countries",
        "checked": true,
        "children": [
          {"title": "IN", "id": 1, "checked": true},
          {"title": "TH", "id": 2, "checked": true}
        ]
      }
    ]
  }
]

Answer 2

這里的訣竅如下：

if (list.indexOf(ele.title) > -1 || list.indexOf(el.title) > -1) {
    el.checked = true;
}

 var obj = [{ title: "Sample", checked: false, children: [{ title: "products", checked: false, children: [{ title: "clothes", id: 1, checked: false }, { title: "electronics", id: 2, checked: false } ] }, { title: "countries", checked: false, children: [{ title: "IN", id: 1, checked: false }, { title: "TH", id: 2, checked: false } ] } ] }]; var list = ["clothes", "countries"]; obj.forEach(elem => { elem.children.forEach(ele => { ele.children.forEach(el => { if (list.indexOf(ele.title) > -1 || list.indexOf(el.title) > -1) { el.checked = true; } }) }) }) console.log(obj)