获取JSON对象并读取数据

时间:2014-12-11 22:51:20

标签: javascript ajax json

这是我的代码:

var readAll = function () {
    $.ajax(
            {
                url: _spPageContextInfo.webServerRelativeUrl +
                    "/_api/web/lists/getByTitle('PhoneBook')/items/" +
                    "?$select=Id, Title, pb_FirstName, pb_PhoneNumber" +
                    "&$orderby=Title,pb_FirstName, pb_PhoneNumber",
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    console.log(data);
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            }
        );
};


$(document).ready(function () {
    readAll();
});

$.get("https://-b55afdb7c2a3eb.sharepoint.com/sites/ak-dev/PhoneBookApp2")

function readList(data) {

    data = {
        "d": {
            "results": [{
                "__metadata": {
                    "id": "b4d773a6-f31e-442d-8974-38c535d491d6",
                    "uri": "https://-b55afdb7c2a3e6.sharepoint.com/sites/ak-dev/PhoneBookApp2/_api/Web/Lists(guid'1643df56-9c0c-41d8-8460-746c0490b234')/Items(1)",
                    "etag": "\"1\"",
                    "type": "SP.Data.LST_x005f_PhoneBookListItem"
                },
                "Id": 1,
                "Title": "name111111",
                "pb_FirstName": "name",
                "pb_PhoneNumber": "1234",
                "ID": 1
            }]

        }
    }

    var html = [];

    data = data.d.results;
    for (var i = 0; i < data.d.results; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].ID + "</td>");
        tr.append("<td>" + data[i].Title + "</td>");
        tr.append("<td>" + data[i].pb_FirstName + "</td>");
        tr.append("<td>" + data[i].pb_PhoneBook + "</td>");
        $('table').append(tr);
    }

    html.push("</table>");
    $('.table').html(html.join(''));
}

$.get("https://-b55afdb7c2a3eb.sharepoint.com/sites/ak-dev/PhoneBookApp2")
.success(function (response) {
    $('.table').append('<tr><td>Id</td></tr><tr><td>Title</td></tr><tr><td>Last Name</td></tr><tr><td>Phone</tr><')
})
.error(function (err) {
    alert(JSON.stringify(err));
});

那么,我如何获取数据并与我的HTML一起构建一个字符串并将其放在我的HTML表格中?我希望你能帮助我。我使用for循环获取数据是对的吗?

我忘了说我有一个列表,我保存了我的数据。我的目标是在我的html表中呈现数据。上面的代码不起作用。

2 个答案:

答案 0 :(得分:1)

试试这个:

data = data.d.results;

var _table = $('<table/>');
for (var i in data) {
    tr = $('<tr/>');
    tr.append("<td>" + data[i].Id + "</td>"); // WARNING! You wrote ID instead of Id
    tr.append("<td>" + data[i].Title + "</td>");
    tr.append("<td>" + data[i].pb_FirstName + "</td>");
    tr.append("<td>" + data[i].pb_PhoneBook + "</td>");
    tr.appendTo(_table);
}

然后你可以做

_table.appendTo( <<Some Selector>> );

当然,如果[table]元素已经存在,只需将[tr]附加到它...

修改 用jQuery的for替换de $.each()循环会很棒。例如:

$.each(data, function() {
  // Do each row stuff here..
  // Data is accesible like this:
  //       this.Id or this.Title
});

答案 1 :(得分:0)

您无法覆盖数据并将其用作旧值...

只需更改您的var名称(并修复您的循环条件)。

var results = data.d.results;

for (var i = 0; i < results.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + results[i].ID + "</td>");
    ...
}