title: Change objects in nested structure using map function
body: <p>I am trying to change objects in nested map functions. I have one array of objects with nested data.</p>
  <p>If I try to do on this way structure of data is changing. I'm getting array of arrays. Only what I need here is to add for each object one property &quot;level&quot;. Is it possible to do this with nested map functions?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const res = data.map(itemA =&gt; ({ ...itemA,
      level: 'a'
    })
    .subA.map(itemB =&gt; ({ ...itemB,
      level: 'b'
    })))
  
  console.log(res)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
    let data = [{
        name: 'testA1',
        subA: [{
            name: 'testB1',
            subB: [{
              name: 'testC1',
              subC: []
            }]
          },
          {
            name: 'testB2',
            subB: [{
              name: 'testC1',
              subC: []
            }]
          }
        ]
      },
      {
        name: 'testA2',
        subA: [{
          name: 'testB1',
          subB: [{
            name: 'testC1',
            subC: [{
              name: 'testD1',
              subD: []
            }]
          }]
        }]
      }
    ]
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>