title: Flatten and combining an Array of Objects
body: <p>I have an array of objects like so</p>
  <pre><code>[
     {
        &quot;id&quot;:1,
        &quot;name&quot;:&quot;Competition One&quot;,
        &quot;entrants&quot;: [
            {
                &quot;id&quot;:1,
                &quot;competitionId&quot;:1,
                &quot;duration&quot;:&quot;3 minutes&quot;,
             },
             {
                &quot;id&quot;:2,
                &quot;competitionId&quot;:1,
                &quot;duration&quot;:&quot;2 hours&quot;,
             },
        ]
     },
     {
        &quot;id&quot;:2,
        &quot;name&quot;:&quot;Competition Two&quot;,
        &quot;entrants&quot;: [
              {
                &quot;id&quot;:3,
                &quot;competitionId&quot;:2,
                &quot;duration&quot;:&quot;5 hours&quot;,
             },
        ]
     },
  ]
  </code></pre>
  <p>What I am trying to do is get a flat array containing only the entrants, as such I am doing this</p>
  <pre><code>const entrants = competitions.flatMap((comp) =&gt; {
      return comp.entrants;
  });
  </code></pre>
  <p>This seems to do the job.  I now have the following</p>
  <pre><code>[
     {
        &quot;id&quot;:1,
        &quot;competitionId&quot;:1,
        &quot;duration&quot;:&quot;3 minutes&quot;,
     },
     {
        &quot;id&quot;:2,
        &quot;competitionId&quot;:1,
        &quot;duration&quot;:&quot;2 hours&quot;,
     },
     {
        &quot;id&quot;:3,
        &quot;competitionId&quot;:2,
        &quot;duration&quot;:&quot;5 hours&quot;,
     }
  ]
  </code></pre>
  <p>However, what I can't figure out is how to add a new field within the above data that contains the name of the competition.  So what I am after is this</p>
  <pre><code>[
     {
        &quot;id&quot;:1,
        &quot;competitionId&quot;:1,
        &quot;name&quot;: &quot;Competition One&quot;
        &quot;duration&quot;:&quot;3 minutes&quot;,
     },
     {
        &quot;id&quot;:2,
        &quot;competitionId&quot;:1,
        &quot;name&quot;: &quot;Competition One&quot;
        &quot;duration&quot;:&quot;2 hours&quot;,
     },
     {
        &quot;id&quot;:3,
        &quot;competitionId&quot;:2,
        &quot;name&quot;: &quot;Competition Two&quot;
        &quot;duration&quot;:&quot;5 hours&quot;,
     }
  ]
  </code></pre>
  <p>How can this be achieved?  I know how to do this with conventional loops, but trying to force myself to learn the ES6 way of doing things.  Is this where a reduce could come in handy?</p>
  <p>Any advice appreciated.</p>
  <p>Thanks</p>