How to change property value in array object with array values in javascript

Question

How to change property in the object array based on array of values in javascript,

I have object obj and parameter as list , should changed the property checked to true, if title matched with the list in javascript

if the title is matched with list and has children, then checked: true ie. countries title is matched with list, then children also change the property checked: true

if the children title is matched, then change checked: true for that object only ie. clothes title is matched with list, then change the property checked: true for that object only

I stuck to do with list of arrays as param,

 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"];

Expected 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

You need some recursion, to handle any depth of nesting:

With this solution, it is very generic, you can change the childrenProp, matchProp, checkedProp etc. and it will allow you to search as deep as you need to in a nested structure.

 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

The trick here is below:

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)