jquery - 使用 jQuery 解析 JSON 数据

Question

我有一个返回此 JSON 的 Web 服务:

[{
    "user_id": "1",
    "user_name": "User1",
    "user_age": "20"
}, {
    "user_id": "2",
    "user_name": "User2",
    "user_age": "21"
}, {
    "user_id": "3",
    "user_name": "User3",
    "user_age": "24"
}, {
    "user_id": "4",
    "user_name": "User4",
    "user_age": "34"
}, {
    "user_id": "5",
    "user_name": "User5",
    "user_age": "27"
}]

我想要的是我想将其填充到某个列表中，并且还想单击列表项的索引，以便我可以根据该索引值检索更多信息(user_id)。

我所做的是:

function fetchFunction() {
    //fn.load('fetchPage.html');
    console.log("fetchFunction is invoked");

    var header = "<ons-list-header>My Inset ListTTT</ons-list-header>";

    $.ajax({
        type: 'POST',
        url: "fetchJSON.php",
        timeout: 5000,
        //dataType:'text',
        dataType:'json',
        success: function(data) {
             var data2 = JSON.stringify(data); //to string
             //var data2 = JSON.parse(data); //to string
             console.log("Index of list is: " + data2[0].user_id + " and username is: " + data2.user_name);         

             //alert("Index is: " + data[0]); 
             //$("#myListElement").html(header);
             //$("#myListElement").append(data);

             // Parse 'data' here
            console.log("SuccessED");
        },
        error: function(err) {
            ons.notification.alert("Error: " + err.status + ", " + err.statusText);
            console.log("Error: " + err);
            // console.log(err.status);
            // console.log(err.statusText);
            // $("#div1").text(err.responseText);
        }
    });
}

data2[0].user_id 没有执行任何操作，只是返回 undefined。

我在名为 myListElement 的 div 上有一个 click 函数，因此我想显示其上的 user_id触发了点击功能。

if (event.target = "fetchPage2.html") {
        $("#myListElement").click(function(){
            alert("List Item Clicked!");
        });
    }

如果你给我一些想法，我会很高兴。

顺便说一句，我正在使用:Cordova + OnSenUI。 :/

谢谢。

PS:我将此ons-list作为列表。并想在这里填充它。

<ons-list modifier="inset" id="myListElement">
    <ons-list-header >My Inset listdc</ons-list-header>
    <ons-list-item modifier="longdivider" tappable>Item A</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item B</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item C</ons-list-item>
</ons-list> 

Answer 1

如果您的服务使用 application/json 返回数据，则使用直接数据变量

console.log("Index of list is: " + data[0].user_id + " and username is: " + data[0].user_name);   

测试代码

var data = [{
    "user_id": "1",
    "user_name": "User1",
    "user_age": "20"
}, {
    "user_id": "2",
    "user_name": "User2",
    "user_age": "21"
}, {
    "user_id": "3",
    "user_name": "User3",
    "user_age": "24"
}, {
    "user_id": "4",
    "user_name": "User4",
    "user_age": "34"
}, {
    "user_id": "5",
    "user_name": "User5",
    "user_age": "27"
}]

console.log("Index of list is: " + data[0].user_id + " and username is: " + data[0].user_name);

如果您的服务返回带有文本的数据，则使用 JSON.parse() 函数将数据转换为 Json

var data2 = JSON.parse(data);
console.log("Index of list is: " + data2[0].user_id + " and username is: " + data2[0].user_name);  

测试代码

var data = '[{ "user_id": "1", "user_name": "User1", "user_age": "20" }, { "user_id": "2", "user_name": "User2", "user_age": "21" }, { "user_id": "3", "user_name": "User3", "user_age": "24" }, { "user_id": "4", "user_name": "User4", "user_age": "34" }, {"user_id": "5","user_name": "User5", "user_age": "27" }]'
var data2 = JSON.parse(data);
console.log("Index of list is: " + data2[0].user_id + " and username is: " + data2[0].user_name);