Printing JSON Data into innerHTML getting undefined - [object]

Question

Hi guys Im trying to print a list of scores saved within a database, ive got the data as JSON data (see below)

I am trying to print all each object within the "Scores" array using the following code

    function showScores() {
        var ourRequest = new XMLHttpRequest();
        var x, i = "";
        ourRequest.open('GET', '/allScores');
        ourRequest.onload = function() {
           var ourData = JSON.parse(ourRequest.responseText);
           for (i in ourData.scores) {
               x += ourData.scores[i] + "<br>";
           }
           document.getElementById("scoresList").innerHTML = x;
        };
        ourRequest.send();
    }

However it is printing out the following

Any help with this is greatly appreciated, thanks guys

x should be initialized. Try with this version: function showScores() { var ourRequest = new XMLHttpRequest(), x = ""; ourRequest.open('GET', '/allScores'); ourRequest.onload = function() { var ourData = JSON.parse(ourRequest.responseText); for (var i in ourData.scores) { x += ourData.scores[i] + "<br>"; } document.getElementById("scoresList").innerHTML = x; }; ourRequest.send(); }. — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Dec 9, 2018 at 16:30
so you are trying to append the json to the html. Do you have any table structure or ul li ? — Beginner
– Beginner, Commented Dec 9, 2018 at 16:33
Hi Danny, initialising got rid of the undefined, however still getting [object, Object] twice, and Dileep Im using <div id="Scores"> <ul id="scoresList"> </ul> </div> — L Thompson
– L Thompson, Commented Dec 9, 2018 at 16:35
To show JSON or JS Objects in html try embedded javascript (ejs) ejs.co — its4zahoor
– its4zahoor, Commented Dec 9, 2018 at 16:35
x += ourData.scores[i] This is just appending a raw object to your HTML string. Javascript can’t magically parse this into HTML for you, so it just outputs [object Object]. You could access individual parts of this object and print those instead (eg: x += ourData.scores[i].Away_score) — MTCoster
– MTCoster, Commented Dec 9, 2018 at 16:37

MTCoster · Accepted Answer · 2018-12-09 16:48:04Z

1

This line tries to append a raw object to your HTML string:

x += ourData.scores[i]

Javascript can’t magically parse this into HTML for you, so it just outputs [object Object].

You need to build a string from the individual parts of this object and print that instead. For example:

Note that you should not use for ... in with an array

ourData.scores.forEach(function (score) {
  x += `<p>[H] ${score.Home_Team} <b>${score.Home_Score}</b> - <b>${score.Away_Score}</b> ${score.Away_Team} [A]</p>`;
});

Which would output something like this for each score:

[H] Arsenal 2 - 2 Newcastle [A]

Be sure to set x = "" before the loop otherwise the string will still start with undefined.

In case you’re interested: there are more succinct ways of writing this loop. Using Array.map() for instance:

let x = ourData.scores.map(score => {
  return `<p>[H] ${score.Home_Team} <b>${score.Home_Score}</b> - <b>${score.Away_Score}</b> ${score.Away_Team} [A]</p>`;
}).join();

This expression does not require initialization of x beforehand.

edited Dec 9, 2018 at 16:48

answered Dec 9, 2018 at 16:40

MTCoster

6,1843 gold badges33 silver badges55 bronze badges

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

1 Comment

charlietfl Over a year ago

Still have to address undefined + String

Beginner · Accepted Answer · 2018-12-09 16:45:22Z

you can create the elements as string and you can join the entire array and assign it to the innerHTML, as shown below.

You can change the structure, here for example i had made to ul , li you can create table or whatever format.

Note if you want to just append it, since the object you can't directly append it using JSON.stringify which will convert your object into string.

I hope this will solve your issue. Please let me know if any other issue you are facing.

var jsonObj = {scores: [{"Away_Score": 2, "Away_Team": "Newcastle", "Home_Score": 2, "Home_Team": "Arsenal"}, {"Away_Score": 2, "Away_Team": "Napoli", "Home_Score": 4, "Home_Team": "Liverpool"}]}

var html = jsonObj.scores.map(o => {
 return `<ul><li>${o.Away_Team}</li><li>${o.Away_Score}</li><li>${o.Home_Team}</li><li>${o.Home_Score}</li></ul>`
})

document.getElementById("todaysData").innerHTML = html.join("")

<div id="todaysData">

</div>

Collectives™ on Stack Overflow

Printing JSON Data into innerHTML getting undefined - [object]

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related