How to display a single value for an object in an array instead of the entire object?

rachel 0
Viewed 34

I'm getting data from an API to be used to display game genres on screen. The issue is the way the code is currently written displays the entire object, but I only want specific values.


    const onGameSelect = game => {
    
      
       document.querySelector("#summary").innerHTML = `
       <article class="media">
         <figure class="media-left">
          <p class="image">
           <img src="${game.background_image}" />
           </p>
           </figure>
            <div class="media-content">
              <div class="content">
                <h1>${game.name}</h1>
                <h4>${JSON.stringify(game.genres)}</h4>
                </div>
    
           </article>
           `    
                
    };

Result:

[
   {
      "id":4,
      "name":"Action",
      "slug":"action"
   },
   {
      "id":11,
      "name":"Arcade",
      "slug":"arcade"
   },
   {
      "id":14,
      "name":"Simulation",
      "slug":"simulation"
   },
   {
      "id":51,
      "name":"Indie",
      "slug":"indie"
   },
   {
      "id":59,
      "name":"Massively Multiplayer",
      "slug":"massively-multiplayer"
   }
]

What i want it to display on screen instead:

Action
Arcade
Simulation
Indie
Massively Multiplayer
template-literals object arrays javascript
1 Answers

You can just map it out: obj.genres.map(o => o.name).join(" ")

let obj = {genres: [{"id":4,"name":"Action","slug":"action"},{"id":11,"name":"Arcade","slug":"arcade"},{"id":14,"name":"Simulation","slug":"simulation"},{"id":51,"name":"Indie","slug":"indie"},{"id":59,"name":"Massively Multiplayer","slug":"massively-multiplayer"}]};
let genres = obj.genres.map(o => o.name).join(" ")
console.log(genres)

// or

document.querySelector("#summary").innerHTML = `${obj.genres.map(o => o.name).join(" ")}`;
<div id="summary"></div>

Kinglish0
Related