title: Angular2,Typescript: array map() method: Pushing nested elements. Cannot read property 'map' of undefined
body: <p>Hi in Angular 4 I'm using the following code to parse data from an API to TypeScript array of rows. The code below works if elements ['item.tceCampRun', 'item.tceCommTreeDetail'] exist. </p>
  
  <p>If one of them like element item.tceCommTreeDetail does not exist I get this ERROR TypeError: Cannot read property 'map' of undefined. </p>
  
  <p>What is the best way to process a nested object like this? </p>
  
  <pre><code> private handleGetCamp(data: Response) {
      if (data.status === 200) {
        // this.tceCamp = data.json();
        // this.firstTceCamp = this.tceCamp[0];
  
        let other = []; // your other array...
        let j = 1;
        let run = 999000;
        let runheader = true;
        let runheaderid = 1;
  
        data.json().map(item =&gt; {
            j++;
            runheader = true;
            return {
                id: j,
                rowtype: 'camp',
                expanded: false,
                cells: [{ cid: 1, text: item.name }, { cid: 2, text: item.dailyStartTime }, { cid: 3, text: item.dailyEndTime }, { cid: 4, text: item.scriptId }, { cid: 14 }],
                rows:[{
                  id: run++,
                  pid: j,
                  header: true,
                  rowtype: 'run',
                  expanded: false,
                  cells: [{cid: 1, text: 'Runs', header: false},
                    {cid: 2, text: 'Created', header: true},
                    {cid: 3, text: 'Modified', header: true},
                    {cid: 4, text: 'Camp', header: true},
                    {cid: 12, text: ' ', header: true},
                    {cid: 13, text: ' ', header: true}],
                  rows:
                    item.tceCampRun.map(item2 =&gt; {
                      return {
                        id: run++,
                        mypid: runheaderid,
                        pid: runheaderid,
                        rowtype: 'run',
                        expanded: false,
                        cells: [{cid: 1, text: item2.name}, {cid: 2, text: 'c 2'}, {cid: 3, text: 'c 3'}, {
                          cid: 4,
                          text: item2.id
                        }, {cid: 14}]
                      }
                    })
                },
                  {
                  id: run++,
                  pid: j,
                  header: true,
                  expanded: false,
                  rowtype: 'InteractiveScript',
                  cells: [{ cid: 1, text: 'Interactive Script', header: false },
                    { cid: 2, text: 'Response', header: true },
                    { cid: 3, text: 'Action', header: true },
                    { cid: 4, text: 'Action Value', header: true },
                    { cid: 12, header: true  },
                    { cid: 13, header: true }],
                  rows:
                    item.tceCommTreeDetail.map(item3 =&gt; {
                      return {
                        id: run++,
                        mypid: runheaderid,
                        pid: runheaderid,
                        rowtype: 'run',
                        expanded: false,
                        cells: [{cid: 1, text: item3.name}, {cid: 2, text: 'c 2'}, {cid: 3, text: 'c 3'}, {
                          cid: 4,
                          text: item3.id
                        }, {cid: 14}]
                      }
                    })
  
                  }
                ]
  
            }
        }).forEach(item =&gt; other.push(item));
  </code></pre>
  
  <p>Nested rows should look like this:
  <a href="https://i.stack.imgur.com/yJXez.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJXez.png" alt="enter image description here"></a></p>