title: Adding New Properties to Object from other Objects
body: <p>I am trying to merge data from two objects into another object which is used to present markers on a Leaflet map.</p>
  <p>At a high level I am trying to supplement an object that looks like the below:</p>
  <pre><code>const teams = {
      &quot;Washington Redskins&quot;: {
          primary: &quot;#000000&quot;,
          secondary: &quot;#97233f&quot;,
          coordinates: {
              lat: 33.5276,
              lon: -112.263275
          }
      },
      &quot;Indianapolis Colts&quot;: {
          primary: &quot;#000000&quot;,
          secondary: &quot;#a71930&quot;,
          coordinates: {
              lat: 33.755489,
              lon: -84.401993
          }
      },
      &quot;Baltimore Ravens&quot;: {
          primary: &quot;#9e7c0c&quot;,
          secondary: &quot;#241773&quot;,
          coordinates: {
              lat: 39.278088,
              lon: -76.623322
          }
      }
    }
  </code></pre>
  <p>With data from two other objects so that for each team two additional properties are added and the object looks like:</p>
  <pre><code>&quot;Indianapolis Colts&quot;: {
          primary: &quot;#000000&quot;,
          secondary: &quot;#a71930&quot;,
          ownedCards: 1 ← a dynamic value based on calculations on another object
          wantedCards: 4 ← a dynamic value based on calculations on another object
          coordinates: {
              lat: 33.755489,
              lon: -84.401993
          }
      },
  …. ,
  </code></pre>
  <p>At the bottom of this question is the full code I have so far, but I'll set out below the particular parts I'm struggling with.</p>
  <p>Having done work to pull out a list of unique teams in a person's collection, and the number of times that team appears in the collection I am left with with two objects:</p>
  <ol>
  <li><code>teamsAndOwnedCards</code> which looks like <code>{&quot;Indianapolis Colts&quot;:1,&quot;Miami Dolphins&quot;:1,&quot;Washington Redskins&quot;:44}</code></li>
  <li><code>teamsAndWantedCards</code> which looks like <code>{&quot;Green Bay Packers&quot;:3,&quot;Miami Dolphins&quot;:1,&quot;Dallas Cowboys:2}</code></li>
  </ol>
  <p>for each team in the <code>teamsAndOwnedCards</code> object I would like to insert a property against the matching team in the <code>teams</code> object, for example</p>
  <pre><code>&quot;Indianapolis Colts&quot;: {
          primary: &quot;#000000&quot;,
          secondary: &quot;#a71930&quot;,
          ownedCards: 1 ← a dynamic value based on values in teamsAndOwnedCards
          coordinates: {
              lat: 33.755489,
              lon: -84.401993
          }
      },
  …. ,
  </code></pre>
  <p>and the same for teams in the <code>teamsAndWantedCards</code> object, except that here the property added would be <code>wantedCards: 2</code> (where 2 is the value that team has in the <code>teamsAndWantedCards</code> object, so in this case Dallas Cowboys.</p>
  <p>Below if the full code that shows how I am deriving the teams and the number of times they appear in the user's collections.  It may not be the best but it gets me the data I need i.e. <code>teamsAndOwnedCards</code> and <code>teamsAndWantedCards</code>, it's how I get this data into the <code>teams</code> object that I'm struggling with,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ownedCards = [{"_id":{"$oid":"61b27483578427ce31d1571f"},"card_id":"61afd5eb170010f187fa10d0","brand":"Contenders","status":"Own","team":"Washington Redskins","collection_type":"Football"},{"_id":{"$oid":"61b27483578427ce31d15720"},"card_id":"61afd5ef170010f187fa5ad6","brand":"National Treasures","status":"Own","team":"Washington Redskins","collection_type":"Football"},{"_id":{"$oid":"61d850d6b6d67e836eab9871"},"card_id":"61afd4d5170010f187e9c0db","brand":"Black","status":"Own","team":"Indianapolis Colts","collection_type":"Football"},{"_id":{"$oid":"61e995ff2738954edae011ec"},"card_id":"61ddf5b768ebbba1a4fd2c33","brand":"Black","status":"Own","team":"Alabama","collection_type":"Football"}]
  
  const wantedCards = [{"_id":{"$oid":"61b27659578427ce31d1e4f8"},"card_id":"61afd5ef170010f187fa5a46","brand":"National Treasures","status":"Want","team":"Washington Redskins","collection_type":"Football"},{"_id":{"$oid":"61b279fa578427ce31d302d9"},"card_id":"61afd5e2170010f187f98cf5","brand":"National Treasures","status":"Want","team":"Washington Football Team","collection_type":"Football"},{"_id":{"$oid":"61bfa860b6d67e836ef9e2cc"},"card_id":"61afd5e2170010f187f98cf5","brand":"National Treasures","status":"Want","team":"LSU", "collection_type":"Baseball"}]
  
  
  const teams = {
      "Washington Redskins": {
          primary: "#000000",
          secondary: "#97233f",
          coordinates: {
              lat: 33.5276,
              lon: -112.263275
          }
      },
      "Indianapolis Colts": {
          primary: "#000000",
          secondary: "#a71930",
          coordinates: {
              lat: 33.755489,
              lon: -84.401993
          }
      },
      "Baltimore Ravens": {
          primary: "#9e7c0c",
          secondary: "#241773",
          coordinates: {
              lat: 39.278088,
              lon: -76.623322
          }
      }
     }
  
    //get an array of teams from the team file
      const listofTeams = Object.keys(teams).map((key) =&gt; {
          //const nestedObject = teams[key]
          const nestedObject = key
  
          return nestedObject
      })
       console.log("listofTeams" + JSON.stringify(listofTeams))
  
     
  //a function to count the number of times a team appears in a collection
  const countUnique = arr =&gt; {
      const counts = {};
      for (var i = 0; i &lt; arr.length; i++) {
          counts[arr[i]] = 1 + (counts[arr[i]] || 0);
      };
      return counts;
  };
  
  // create an array of teams in the collection
    const arrayOfOwnedTeams = ownedCards.map(a =&gt; a.team);
    
  //get the number of times a team appears in the array
    const countOfOwnedTeams = countUnique(arrayOfOwnedTeams)
      console.log("countOfOwnedTeams" + JSON.stringify(countOfOwnedTeams))
  
      //get the number of times a team appears int he wanted card colelciton
    const arrayOfWantedTeams = wantedCards.map(a =&gt; a.team);
      const countOfWantedTeams = countUnique(arrayOfWantedTeams)
      console.log("countOfWantedTeams" + JSON.stringify(countOfWantedTeams))
  
  
  
    //make sure that only those owned cards that are in the teams list are shown in the list of teams with cards (because e.g. I don't support college teams e.g. LSU)
      const teamsAndOwnedCards = listofTeams.reduce((acc, el) =&gt; {
          if (el in countOfOwnedTeams) acc[el] = countOfOwnedTeams[el];
          return acc;
      }, {});
  
      console.log("teamsAndOwnedCards" + JSON.stringify(teamsAndOwnedCards))
      
      
    //do the same for wanted cards
      const teamsAndWantedCards = listofTeams.reduce((acc, el) =&gt; {
          if (el in countOfWantedTeams) acc[el] = countOfWantedTeams[el];
          return acc;
      }, {});
  
      console.log("teamsAndWantedCards" + JSON.stringify(teamsAndWantedCards))
      
      //convert the owned cards object into an array, so it can be mapped over into a new object
      const arrayOfOwnedTeamsAndCards = Object.entries(teamsAndOwnedCards)
      //create a new object with a structure the same as the teams object 
      const objectFromArrayOfOwnedTeamsAndCards = arrayOfOwnedTeamsAndCards.map(([key, value]) =&gt; ({ [key]: { ownedCards: value } }))
      console.log("objectFromArrayOfOwnedTeamsAndCards" + JSON.stringify(objectFromArrayOfOwnedTeamsAndCards))
      
          //convert the wanted cards object into an array, so it can be mapped over into a new object
      const arrayOfWantedTeamsAndCards = Object.entries(teamsAndWantedCards)
      //create a new object with a structure the same as the teams object (BUT, it's an array - aargh!)
      const objectFromArrayOfWantedTeamsAndCards = arrayOfWantedTeamsAndCards.map(([key, value]) =&gt; ({ [key]: { ownedCards: value } }))
      console.log("objectFromArrayOfWantedTeamsAndCards" + JSON.stringify(objectFromArrayOfWantedTeamsAndCards))
      </code></pre>
  </div>
  </div>
  </p>
  <p>Can anyone advise on a more efficient way to do this please?</p>