title: Node 'Flatten/Merge' Array of Objects Containing Arrays and Display with forEach in EJS
body: <p>Apologies for any repeats here, please point me in the direction of a solution if one exists.</p>
  <p>Any other time, I seem able to display array data in ejs no problem, but this new flatten function has me stumped.</p>
  <p>I have a nested array:</p>
  <pre><code>var array = 
  [{
    page: {
      results: [{
          id: &quot;1234&quot;,
          type: &quot;page&quot;,
          title: &quot;Deprecated Spec&quot;,
          children: {
            page: {
              results: [{
                  id: &quot;5678&quot;,
                  type: &quot;page&quot;,
                  title: &quot;Deprecated | Cash Spec&quot;
                },
                {
                  id: &quot;9101&quot;,
                  type: &quot;page&quot;,
                  title: &quot;Deprecated | Ledger Spec&quot;,
                }
              ],
            },
          },
        },
        {
          id: &quot;1121&quot;,
          type: &quot;page&quot;,
          title: &quot;Work Spec&quot;
        }
      ]
    }
  }];
  </code></pre>
  <p>And I have a flatten function:</p>
  <pre><code>function flatten(arr) {
    let flattened = [];
    for (let i = 0; i &lt; arr.length; i++) {
      if (Array.isArray(arr[i])) {
        flattened = flattened.concat(flatten(arr[i]));
      } else {
        flattened.push(arr[i]);
      }
    }
    return flattened;
  }
  </code></pre>
  <p>I set a const and console.log:</p>
  <pre><code>const newArr = (flatten(array))
  
  console.log(newArr);
  </code></pre>
  <p>In the terminal I receive: <strong>[ { page: { results: [Array] } } ]</strong></p>
  <p>For what it's worth, I've also tried flattening this nested array with these methods, and both return the same results.</p>
  <pre><code>const newArr2 = Array.prototype.concat.apply([], array);
  
  const newArr3 = array.flat();
  </code></pre>
  <p>Hmm ok, I figure I can forEach and display the data on the .ejs page, which is set as:</p>
  <pre><code>&lt;% newArr.forEach(function (newArr){ %&gt; 
          &lt;%= newArr.title %&gt;
      &lt;% }) %&gt; 
  </code></pre>
  <p>But this shows nothing.</p>
  <p>I have the res.render functioning properly as I am able to send and display other arrays/data sets.</p>
  <p>If I try to &quot;get into the array&quot; with something like this: <strong>newArr[0].page.results</strong>, or any other variances, they don't work.</p>
  <p>What am I missing to see my flattened array (using the recursive function) in both the console.log and on my ejs page?</p>
  <p><strong>UPDATED:</strong>
  Per comments below, here is my desired output for the arrays and objects seen in var array:</p>
  <pre><code>[{
    page: {
      results: [
         {
          id: &quot;1234&quot;,
          type: &quot;page&quot;,
          title: &quot;Deprecated Spec&quot;
         },
         {
          id: &quot;5678&quot;,
          type: &quot;page&quot;,
          title: &quot;Deprecated | Cash Spec&quot;
         },
         {
          id: &quot;9101&quot;,
          type: &quot;page&quot;,
          title: &quot;Deprecated | Ledger Spec&quot;
          },
          {
          id: &quot;1121&quot;,
          type: &quot;page&quot;,
          title: &quot;Work Spec&quot;
          }
      ]
    }
  }];
  </code></pre>
  <p>Here is a pic of my current console.log
  <a href="https://i.stack.imgur.com/Z2mVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z2mVE.png" alt="can see array/objects and console log" /></a></p>
  <p>Many Thanks!</p>