Dynamic Javascript table with JSON data

Question

I'm trying to create and populate a dynamic table using Javascript and JSON data fetched from a PHP script. The problem I'm encountering is that the first row (the headers) is created, and the keys from the JSON object are put in their correct place, but I can't create a second row with the values associated with those keys (Or it doesn't get displayed). Here is my JS code:

var oReq = new XMLHttpRequest(); //New request object
oReq.onload = function() {
    var Json = JSON.parse(this.responseText);
    for (value in Json.prods[0]){
        alert(value);
    }
    var newTable = document.createElement('table');

    //Create first row
    var tableRowFirst = document.createElement('tr');

    for (key in Json.prods[0]) {
        //create new heading
        var keys = document.createElement('th');

        // append Heading to table
        tableRowFirst.appendChild(keys);

        //set new heading text content to json information
        keys.textContent = key;
    };

    //Create rows
    var tableBody = document.createElement('tbody');
    var tableRow = document.createElement('tr');
    tableBody.appendChild(tableRow);

    for (key in Json.prods[0]) {
        //create new cell
        var values = document.createElement('td');

        // append cell to row
        tableRow.appendChild(values);

        //set new content text content to json information
        values.textContent = Json.prods[0].key;
    };

    //Append table to DOM
    document.body.appendChild(newTable);

    //Append rows to new table
    newTable.appendChild(tableRowFirst);
    newTable.appendChild(tableBody);
};
oReq.open("get", "../php/getalltag.php", true);
oReq.send();

Can anyone help me out?

laszlokiss88 · Accepted Answer · 2015-12-02 12:09:53Z

1

I guess you set the textContent in a wrong way, because you are trying to get the property named key but key is actually a local variable that stores the real property name.

 for (key in Json.prods[0]) {
        ...

        //set new content text content to json information
        values.textContent = Json.prods[0].key;
    };

This should be fine:

values.textContent = Json.prods[0][key];

answered Dec 2, 2015 at 12:09

laszlokiss88

4,0793 gold badges22 silver badges26 bronze badges

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

3 Comments

Luca Giorgi Over a year ago

It's working, and thank you, but now everything is converted to a string. Is there a way to not convert it to a string object?

laszlokiss88 Over a year ago

I'm not sure that I understand. Could you please create a fiddle for this?

Luca Giorgi Over a year ago

Well, the fiddle isn't working, no idea why, but at least you can see my JSON data: jsfiddle.net/qo1vpv7w . As you can see I have an img tag saved in there, and I want the image to be displayed, instead it is treated as a string. Is there a way to avoid this?

Ashish Choudhary · Accepted Answer · 2015-12-02 12:12:11Z

You should place tableBody.appendChild(tableRow); after the rows for loop.

When you do newTable.appendChild(tableBody);, then tableBody is not updated from new rows as its upated before the loop. Therefore you must update tableBody after tableRow has all the required values/rows.

So, the below code

//Create rows
    var tableBody = document.createElement('tbody');
    var tableRow = document.createElement('tr');
    tableBody.appendChild(tableRow);

    for (key in Json.prods[0]) {
        //create new cell
        var values = document.createElement('td');

        // append cell to row
        tableRow.appendChild(values);

        //set new content text content to json information
        values.textContent = Json.prods[0].key;
    };

Becomes

//Create rows
    var tableBody = document.createElement('tbody');
    var tableRow = document.createElement('tr');

    for (key in Json.prods[0]) {
        //create new cell
        var values = document.createElement('td');

        // append cell to row
        tableRow.appendChild(values);

        //set new content text content to json information
        values.textContent = Json.prods[0].key;
    };

    tableBody.appendChild(tableRow); // MOVED HERE

Collectives™ on Stack Overflow

Dynamic Javascript table with JSON data

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related