title: updated nested property without having multiple loops
body: <p>One problem I face is I always repeat myself when manipulating array or object in <code>JavaScript</code>. We are fading away from the <code>jQuery</code> age where we can simply take and amend the stat into or from the <code>DOM</code>.</p>
  
  <p>Take this nested array of object for instance</p>
  
  <pre><code>[
    {
      "data": [
        {
          "name": "item1",
          "checked": false
        },
        {
          "name": "item2",
          "checked": false
        }
      ]
    }
  ]
  </code></pre>
  
  <p>In order to change the <code>checked</code> property of <code>item2</code> I have to do 2 loops</p>
  
  <pre><code>const newData = data.map(o=&gt;{
    return {
      ...o,
      data: o.data.map(o2=&gt;{
       if(o2.name === 'item2'){
         return{
           ...o2,
           'checked': true
         }
       }
       return o2
     })
    }
  })
  </code></pre>
  
  <p>Any better alternative for this problem?</p>