Display all objects inside a div with getJSON

I'm trying to append all objects from this Path of Exile API inside a Div, but keep getting [object object] for the entries: array.

When I check the console via console.log(index, value) I can see everything I want to.

What am I missing inside my code to also show all the [object object] arrays from "entries: " with their data?

Thanks in advance.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.getJSON("http://api.pathofexile.com/ladders/Standard?callback=?", function(result){
                    $.each(result, function(index, value) {
                        console.log(index, value);
                        $("div").append(index + ": " + value + "<br/>");
                    });
                });
            });
        });

    </script>
</head>
<body>

    <button>Klick mich!</button>

    <div></div>

</body>
</html>

Solution

The problem here is that you are passing an Object when JavaScript expects a string and thus it converts the Object to a string using toString method of Object. The toString method always returns [object Object] and that is why you are getting that error.

Before your $("div").append(index + ": " + value + "<br/>"); line, add a check to verify if value is an Object and if it is, convert it into a string using JSON.stringify.

You can use the following code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $.getJSON("http://api.pathofexile.com/ladders/Standard?callback=?", function (result) {
          $.each(result, function (index, value) {
            if (value instanceof Object) {
              value = JSON.stringify(value);
            }
            console.log(index, value);
            $("div").append(index + ": " + value + "<br/>");
          });
        });
      });
    });

  </script>
</head>

<body>

  <button>Klick mich!</button>

  <div></div>

</body>

</html>