How to display same property from different objects in Javascript

Question

I am doing a project which uses The Movie Db API and I am bit confused with displaying following object:

(3) [{…}, {…}, {…}]
0: {id: 12, name: "Adventure"}
1: {id: 28, name: "Action"}
2: {id: 878, name: "Science Fiction"}
length: 3
__proto__: Array(0)

Basically, I am trying to figure out how to display those 3 genres in one element. Doing forEach loop like this :

const genreArr = data.genres;
console.log(genreArr)
genreArr.forEach(function(item){
    genre.textContent = item.name;
})

displays only one name of genre rather than all of them. So, what do I have to do to display all of those in one paragraph?

you're overriding the last genre with the next one, consider using +=, or better, accumulate a string and then set it once your done to avoid updating the dom multiple times — Nick Parsons
– Nick Parsons, Commented Jun 17, 2020 at 14:58

JaySnel · Accepted Answer · 2020-06-17 15:04:23Z

2

You could do something like this

let arr = [];
let sentence = '';

genreArr.forEach(el => {
  arr.push(el.name);
  sentence += ' ' + el.name;
})

console.log(arr)
console.log(sentence)

edited Jun 17, 2020 at 15:04

answered Jun 17, 2020 at 14:58

JaySnel

1755 silver badges16 bronze badges

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

Comments

Turnip · Accepted Answer · 2020-06-17 15:08:53Z

This line genre.textContent = item.name; will overwrite the textContent every iteration of forEach leaving only the last value.

You need append to textContent using +=.

const genreArr = [
  {id: 12, name: "Adventure"},
  {id: 28, name: "Action"},
  {id: 878, name: "Science Fiction"}
];

const genre = document.getElementById('genre');

genreArr.forEach(function(item){
    genre.textContent += item.name + ' | ';
})

<div id="genre">

</div>

An alternate, more efficient method using map() and join():

const genreArr = [
  {id: 12, name: "Adventure"},
  {id: 28, name: "Action"},
  {id: 878, name: "Science Fiction"}
];

const genre = document.getElementById('genre');

/* Create an array containing only the 'name' values */
var genreNames = genreArr.map(function(item) {
  return item['name'];
});

/* Assign the names to the div in one go, with a seperator */
genre.textContent = genreNames.join(' | ');

<div id="genre"></div>

Raj Kumar · Accepted Answer · 2020-06-17 15:07:42Z

1

You can use map and do your operation easily

const arraryList = [{id: 12, name: "Adventure"},
{id: 28, name: "Action"},
{id: 878, name: "Science Fiction"}];

const output = arraryList.map(val => val.name);
const combinedName = output.join(",");
console.log(output);
console.log(combinedName);

answered Jun 17, 2020 at 15:07

Raj Kumar

8548 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to display same property from different objects in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related