this Javascript code gives output as [object, Object] , instead of [f, dog]

Question

this Javascript code gives output as [object, Object] , instead of [f, dog].??

 <html>
     <body>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
       <script>
        var animals = [{name:'f', species :'dog'},{name:'f1', species :'dog1'}];
        function isSog(animal) {

            if(animal.species==='dog') return animal;
        }
        function myFunction() {
            document.getElementById("demo").innerHTML = animals.filter(isSog);
        }
       </script>
      </body>
    </html>

Possible duplicate of [Javascript - \[object Object\] means?](http://stackoverflow.com/questions/8892465/javascript-object-object-means) — Blue, May 20 '17 at 09:55

Pankaj Shukla · Accepted Answer · 2017-05-20T20:28:26.490

You need to convert array that you get (after filter method) into string before assigning to innerHTML. So as an example below I am calling JSON.stringify.

You can do :

document.getElementById("demo").innerHTML = JSON.stringify(animals.filter(isSog));

Or you can choose any other format you want. You will have to do some further processing on returned array.

For a simple case such as yours, you can do following:

var animals = [{
  name: 'f',
  species: 'dog'
}, {
  name: 'f1',
  species: 'dog1'
}];

function isSog(animal) {

  if (animal.species === 'dog') return animal;
}

var retObj = animals.filter(isSog);
document.getElementById("demo").innerHTML = "[" + retObj[0].name + "," + retObj[0].species + "]";

<p id="demo"></p>

Note that if your returned array is larger, looping and creating a string would be right option.

curveball · Answer 2 · 2017-05-20T10:07:13.433

It happens because you try to output an object as a string. And it hasn't user-defined toString() method and falls back to the default one that gives you [object Object]. You could add that method like this in order to do something useful, for example, it could return animal's name:

     var animals = [{name:'f', species :'dog', toString: function() {
       return this.name}
    }, {name:'f1', species :'dog1', toString: function() {
       return this.name}
    }];
   
    function isSog(animal) {
        if(animal.species==='dog') return animal;
    }
    console.log('' + animals.filter(isSog)); // forcing string conversion as you do in your code

score 0 · Answer 3 · answered May 20 '17 at 10:02

.filter returns a new array. You can't output reference types like this. You need to specify what you want to output from them to the DOM. In you case:

var newArr = animals.filter(isSog);
var str = '';
if(newArr.length > 0){
    for(var i = 0; i < newArr.length; i++){
        str += "[" + newArr.name + ", " + newArr.species + "] <br>"
    }
}
document.getElementById("demo").innerHTML = str;

score 0 · Answer 4 · answered May 20 '17 at 10:04

This happens because the array that is being returned from the filter method is an object. When you display that object in your HTML it is converted to a string. If you run the method animals.toString() you'll see what I mean. So if you want to display your intended result you'll have a construct a string on your own that looks like the way you want it or you can use JSON.stringify to convert the array to String.

score 0 · Answer 5 · answered May 20 '17 at 10:06

function isSog(animal) {

            if(animal.species==='dog') return animal;
        }
function myFunction() {
    document.getElementById("demo").innerHTML = animals.filter(isSog);
        }

The isSog function returns the object animal. That is the reason why you get the result [object, Object].

function myFunction() {
     document.getElementById("demo").innerHTML = JSON.stringify(animals.filter(isSog));
        }

Hope this helps

this Javascript code gives output as [object, Object] , instead of [f, dog]

5 Answers5