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

Question

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

JSON.stringify(game.genres.map(genre => genre.name))

Tom
– Tom

2022-09-13 19:44:49 +00:00
Commented Sep 13, 2022 at 19:44 — Tom
– Tom, Commented Sep 13, 2022 at 19:44
something like game.genres.map(o=>o.name).join(" ")?

kikon
– kikon

2022-09-13 19:44:52 +00:00
Commented Sep 13, 2022 at 19:44 — kikon
– kikon, Commented Sep 13, 2022 at 19:44

Kinglish · Accepted Answer · 2022-09-13 19:45:20Z

1

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>

answered Sep 13, 2022 at 19:45

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rachel Over a year ago

thank you ! Where did you find how to do this?

Kinglish Over a year ago

This site actually. When I started trying to answer easy questions, I learned alot about how to update my old methods with newer ways. The link in my answer is the absolute best source of javascript info. It's now something I refer to quite often.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related