title: Javascript nested .map() returning multiple arrays
body: <p>Given that I have a <code>JSON</code> structure like this:</p>
  
  <pre><code>{
      "firstData": [{
          "secondData": [{
              "thirdData": [{
                  "value": "whatever"
              }]
          }]
      }]
  }
  </code></pre>
  
  <p>And I need to map from <code>thirdData</code> <code>value === "whatever"</code></p>
  
  <p>So I am doing</p>
  
  <pre><code> const result = firstData.map(first =&gt; {
              return first.secondData.map(second =&gt; {
                  return second.thirdData.map(third =&gt; {
                      return third.value === 'whatever';
                  });
              });
          });
  </code></pre>
  
  <p>And this works somewhat fine, but the result is a another deeply nested array (like <code>[ [ [ {results..} ] ] ])</code>. I know I can flatten this to a single array by other means, but I feel like I am miss using <code>.map()</code>. How can I modify this result to a single array that contains the values of <code>thirdData</code> where the value is what ever I want?</p>
  
  <p>The desired result for this would be a single array of <code>thirdData</code> objects:</p>
  
  <pre><code>[{ value: 'whatever'}, ... {n}]
  </code></pre>