title: Angular - map converts nested array from the initial object into empty array
body: <p>I have an object stored in localStorage like this:</p>
  <pre><code>localStorage.setItem('employeeDepartmentCost', JSON.stringify(this.departments));
  </code></pre>
  <p>I want to recover this object and convert it to a custom class that looks like this:
  <a href="https://i.stack.imgur.com/e64h7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e64h7.png" alt="enter image description here" /></a></p>
  <p>This is how I try:</p>
  <pre><code> this.departments = JSON.parse(localStorage.getItem('employeeDepartmentCost')).map((department: any) =&gt; {
            var newDep = new Department(department.name,
              department.rows.map(row =&gt; new EmployeeCostRow(row.name, row.employees, row.salary)
              ));
            return newDep;
  </code></pre>
  <p>or</p>
  <pre><code>this.departments = JSON.parse(localStorage.getItem('employeeDepartmentCost')).map(department =&gt;
          new Department(department.name,
            department.rows.map(row =&gt; new EmployeeCostRow(row.name, row.employees, row.salary)
            )
          ));
  </code></pre>
  <p>The problem is that the object is not converted correctly, the rows array becomes an empty array after applying map.
  <a href="https://i.stack.imgur.com/b1tgG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1tgG.png" alt="enter image description here" /></a></p>
  <p>How should I solve this in order to wait for the values?
  Or how can I store a custom class in local Storage so I wouldn't need to use map anymore.
  Thanks!</p>