CODEWITHSUNDEEP
javascriptphphtmljson
Luca Giorgi
Luca Giorgi

Reputation: 1010

Dynamic Javascript table with JSON data

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?

Upvotes: 0

Views: 122

Answers (2)

Ashish Choudhary
Ashish Choudhary

Reputation: 2034

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

Upvotes: 0

laszlokiss88
laszlokiss88

Reputation: 4071

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

Upvotes: 1

Related Questions