генерация списка объектов с использованием метода .filter () javascript

Question

Я изучал метод .filter () в Javascript. Я наткнулся на этот пример онлайн.

var heroes = [
        {name: "Batman", franchise: "DC"},
        {name: "Ironman", franchise: "Marvel"},
        {name: "Thor", franchise: "Marvel"},
        {name: "Superman", franchise: "DC"}
    ];

  var marvelHeroes = heroes.filter(function(hero) {
      return hero.franchise == "Marvel";
  })

  document.write(marvelHeroes);

Я ожидаю получить массив объектов, показывающих только героев Marvel. Однако, когда я пытаюсь распечатать результаты переменной marvelHeroes, я получаю следующий результат:

[объект объекта], [объект объекта]

Может кто-нибудь сказать мне, что здесь не так?

Answer 1

Вам необходимо преобразовать структуру данных JS в строку, чтобы просмотреть ее на странице. Для этого вы используете stringify. Далее, чтобы получить хороший форматированный вывод и добавить строку в элемент pre с хорошим отступом.

var heroes = [{"name":"Batman","franchise":"DC"},{"name":"Ironman","franchise":"Marvel"},{"name":"Thor","franchise":"Marvel"},{"name":"Superman","franchise":"DC"}];

var marvelHeroes = heroes.filter(function(hero) {
  return hero.franchise == "Marvel";
})

const pre = document.querySelector('pre');
pre.textContent = JSON.stringify(marvelHeroes, null, 2);

Answer 2

Проблема в том, что вы отправляете ему необработанные объекты JavaScript. Как уже отмечали другие, если вы зафиксируете этот массив, ошибка исчезнет. Причина появления [object Object] в том, что браузер может помещать строки только в HTML. Таким образом, чтобы привести эти объекты в строки, он использует метод Object#toString, в результате чего каждый метод превращается в строку как [object Object]. Используя JSON.stringify для сериализации объектов перед записью их в документ, вы гарантируете, что объекты должным образом представлены в виде строки.

const object = { a: 'a', b: '2', c: 3 };
const stringOne = object.toString();
const stringTwo = JSON.stringify(object);

document.write(stringOne);
document.write(stringTwo);

Answer 3

Вы пытаетесь написать объект, перед этим вам нужно его преобразовать в строку (в json)

document.write(JSON.stringify(marvelHeroes));

var heroes = [
        {name: "Batman", franchise: "DC"},
        {name: "Ironman", franchise: "Marvel"},
        {name: "Thor", franchise: "Marvel"},
        {name: "Superman", franchise: "DC"}
    ];

  var marvelHeroes = heroes.filter(function(hero) {
      return hero.franchise == "Marvel";
  })

  document.write(JSON.stringify(marvelHeroes));