Question

您好我有一个PHP脚本获取信息然后将其放入数组这里是Json数组的样子

 {
"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
        }
    }
]

}

那么循环遍历这种数组然后将其输出到html中的表的最佳方法是什么？

Answer 1

您可以使用jQuery函数

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

或

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

Answer 2

我认为像这样的例子......： - ？

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

我希望你明白发生了什么......

Answer 3

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/

将Json放入HTML表格中

3 个答案: