CODEWITHSUNDEEP
javascriptjqueryhtmljson
Oisian2
Oisian2

Reputation: 105

Putting Json in to HTML table

Hi i have a PHP script that is getting infomation and then putting that in to an array here is what the Json array looks like 

 {
"People": [
    {
        "Person1": {
            "Op": "5459",
            "Name": "Place holder",
            "WorkHours": "5.0",
            "Start": "3:00PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    },
    {
        "Person2": {
            "Op": "5630",
            "Name": "Place holder",
            "WorkHours": "8.75",
            "Start": "7:45AM",
            "End": "4:30PM",
            "Clock": "07:26:49",
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    },
    {
        "Person3": {
            "Op": "5617",
            "Name": "Place holder",
            "WorkHours": "8.5",
            "Start": "7:45AM",
            "End": "4:15PM",
            "Clock": "07:47:06",
            "OFF": "12:00:59",
            "ON": false,
            "OUT": false
        }
    },
    {
        "Person4": {
            "Op": "5596",
            "Name": "Place holder",
            "WorkHours": "5.0",
            "Start": "7:45AM",
            "End": "2:45PM",
            "Clock": "07:46:43",
            "OFF": "12:01:10",
            "ON": false,
            "OUT": false
        }
    },
    {
        "Person5": {
            "Op": "5722",
            "Name": "Place holder",
            "WorkHours": "3.0",
            "Start": "5:00PM",
            "End": "8:00PM",
            "Clock": false,
            "OFF": false,
            "ON": false,
            "OUT": false
        }
    }
]

}

So what would be the best way to loop through this kind of array and then output it to a table in html?

Upvotes: 1

Views: 1641

Answers (3)

Vishal
Vishal

Reputation: 537

1. Get the Json object.
2. Parse it and fill the the table row by row.

$(document).ready(function () {
        $.getJSON(url,
        function (json) {
            var tr;
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].User_Name + "</td>");
                tr.append("<td>" + json[i].score + "</td>");
                tr.append("<td>" + json[i].team + "</td>");
                $('table').append(tr);
            }
        });
    });

  Go to: http://jsfiddle.net/8kkg3/

Upvotes: 1

shaker
shaker

Reputation: 81

I think something like this exemple..:-?

var userData; 

 var loadData = function () {
    $.getJSON("table.json", function (data) {
            userData = data.people;
            buildTable();
        }
    ).error(function () {
            console.log("error - loadTable");
        })
};

/**
 * Create table and rows of users with data from userData
 */

var buildTable = function () {
    for (var i = 0, l = userData.length; i < l; i++) {
        buildRow(userData[i]);
    }
};

var buildRow = function (data) {
    var html = '<tr>' + buildDataRow(data);
    +'</tr>';
    $('#tableBody').append(html);
};

var buildDataRow = function (data) {
    var html = '<td>' + data.what you have+ '</td>' +
        '<td>' + data. what you have + '</td>' +
        '<td>' + data. what you have + '</td>' +
        '<td>' + data. what you have and so on +'</td>';

    return html;
};

I hope you understand what is happening....

Upvotes: 1

Joffrey Maheo
Joffrey Maheo

Reputation: 2919

You can use a jQuery function

getJson : http://api.jquery.com/jquery.getjson/

or

ajax : http://api.jquery.com/jquery.ajax/

Upvotes: 1

Related Questions