generating list of objects using .filter() method javascript

Question

I was studying up on the .filter() method in Javascript. I came across this example online.

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);

I expect to get an array of objects showing only the Marvel heroes. However, when I try to print the results of the marvelHeroes variable, I am getting the following result:

[object Object],[object Object]

Can someone tell me what is wrong here?

You cannot output an array to the document. Either use console.log(marvelHeroes) or document.body.innerText = JSON.stringify(marvelHeroes); Closing this. — kemicofa
– kemicofa, Commented Jan 21, 2019 at 19:55
Use document.write(JSON.stringify(marvelHeroes)); and check the output. — Shidersz
– Shidersz, Commented Jan 21, 2019 at 19:55
Possible duplicate of How to document.write javascript object — adiga
– adiga, Commented Jan 21, 2019 at 19:57

Andrew Dibble · Accepted Answer · 2019-01-21 20:15:51Z

2

The issue is, you're sending it raw JavaScript objects. As others have pointed out, if you stringify this array, the error disappears. The reason that [object Object] shows up is that the browser can only put strings in HTML. So in order to coerce those objects into strings, it uses the Object#toString method, which results in each method being turned into a string as [object Object]. By using JSON.stringify to serialize the objects before writing it to the document, you ensure that the objects are properly represented in string form.

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

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

answered Jan 21, 2019 at 20:15

Andrew Dibble

9118 silver badges17 bronze badges

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

Comments

Andy · Accepted Answer · 2019-01-21 20:06:14Z

2

You need to convert the JS data structure to a string to view it on the page. For that you use stringify. Further, to get a nice formatted output, and add the string to a pre element with a nice indentation.

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);

<pre></pre>

answered Jan 21, 2019 at 20:06

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2019-01-21 19:54:28Z

1

You try to write object, before that you need to stringify it (to 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));

answered Jan 21, 2019 at 19:54

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Collectives™ on Stack Overflow

generating list of objects using .filter() method javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related