Как отобразить одно и то же свойство из разных объектов в Javascript - PullRequest
Новая
       8

Как отобразить одно и то же свойство из разных объектов в Javascript

1 голос
/ 17 июня 2020

Я делаю проект, который использует API Mov ie Db, и меня немного смущает отображение следующего объекта: 

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

В основном, я пытаюсь понять, как отображать эти 3 жанра в одном элементе. Выполнение forEach l oop следующим образом: 

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

отображает только одно название жанра, а не их все. Итак, что мне нужно сделать, чтобы отобразить все в одном абзаце?

Ответы [ 3 ]

2 голосов
/ 17 июня 2020

Вы могли бы сделать что-то вроде этого 

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

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

console.log(arr)
console.log(sentence)
1 голос
/ 17 июня 2020

Вы можете использовать карту и легко выполнять свою операцию 

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);
1 голос
/ 17 июня 2020

Эта строка genre.textContent = item.name; будет перезаписывать textContent каждую итерацию forEach, оставляя только последнее значение.

Вам нужно добавить к textContent, используя +=. 

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>

Альтернативный, более эффективный метод с использованием map() и 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>
...