Javascript循环不显示多于1个数据的实例

时间：2016-07-14 09:01:12

标签： javascript jquery

我遇到一些代码问题，因为它没有显示超过1个数据实例。

以下是完整的数据和代码：

数据：

var json = [
{
    "main": [
        {
            "id": "7561",
            "secid": "5",
            "carid": "653",
            "phaseId": "0",
            "title": "idea 2",
            "text": "<p>dfggfd</p>",
            "created": "2016-05-19 10:52:37",
            "user": {
                "id": "24793",
                "username": "myUsername",
                "firstName": "myName",
                "lastName": "mySurname",
                "bio": "",
                "town": "London",
                "country": "United Kingdom",
                "avatar": "na",
                "confirmed": true,
                "hasEml": true,
                "haspsword": true,
                "hEV": true,
                "hasTermsAgreed": false,
                "hasCommunityTermsAgreed": true,
                "profileQuestionAns": {
                    "userfield_14": {
                        "id": 6223,
                        "user": 24793,
                        "userfield": 14,
                        "data": "fdszgsfdgsd"
                    },
                    "userfield_15": {
                        "id": 6224,
                        "user": 24793,
                        "userfield": 15,
                        "data": "Blah"
                    }
                },
                "usertype": "2",
                "ha": true,
                "language": null,
                "walkthroughpsed": "1",
                "registerEmlSent": false,
                "hasCompletedOnBoarding": true
            },
            "co": [],
            "vtingData": {
                "values": {
                    "1": "1"
                },
                "totalVTs": "1",
                "score": "1",
                "type": "up",
                "mostpopVT": "1",
                "userVT": 0,
                "isClosed": 0
            },
            "fileData": [],
            "cmtCount": 0,
            "canBeVTd": true,
            "mlestId": "53",
            "mlestStatus": 0,
            "mlestTimeout": 0,
            "pstfields": [],
            "modLabel": null,
            "tags": [],
            "modStatus": "0"
        },
        {
            "id": "7560",
            "secid": "5",
            "carid": "653",
            "phaseId": "0",
            "title": "idea 1",
            "text": "<p>adsfasdf</p>",
            "created": "2016-05-19 10:33:48",
            "user": {
                "id": "24787",
                "username": "Ar_2",
                "firstName": "myName",
                "lastName": "mySurname",
                "bio": "",
                "town": "London",
                "country": "United Kingdom",
                "avatar": "sdffds",
                "confirmed": true,
                "hasEml": true,
                "haspsword": true,
                "hEV": true,
                "hasTermsAgreed": false,
                "hasCommunityTermsAgreed": true,
                "profileQuestionAns": {
                    "userfield_14": {
                        "id": 6208,
                        "user": 24787,
                        "userfield": 14,
                        "data": "aDASDASD"
                    },
                    "userfield_15": {
                        "id": 6209,
                        "user": 24787,
                        "userfield": 15,
                        "data": "Blah"
                    }
                },
                "usertype": "2",
                "ha": true,
                "language": null,
                "walkthroughpsed": "1",
                "registerEmlSent": false,
                "hasCompletedOnBoarding": true
            },
            "co": [],
            "vtingData": {
                "values": {
                    "1": "2"
                },
                "totalVTs": "2",
                "score": "2",
                "type": "up",
                "mostpopVT": "1",
                "userVT": 0,
                "isClosed": 0
            },
            "fileData": [],
            "cmtCount": 0,
            "canBeVTd": true,
            "mlestId": "53",
            "mlestStatus": 0,
            "mlestTimeout": 0,
            "pstfields": [],
            "modLabel": null,
            "tags": [],
            "modStatus": "0"
        }
    ]
}];

Javascript代码：

var tr;
    for (var i = 0; i < json.length; i++) {
        var obj = json[i];
        tr = $('<tr/>');
        tr.append("<td>" + json[i]['main'][i].id + "</td>");
        tr.append("<td>" + json[i]['main'][i]['user'].username + "</td>");
        tr.append("<td>" + json[i]['main'][i].carid + "</td>");
        tr.append("<td>" + json[i]['main'][i]['user'].firstName + " " + json[i]['ideas'][i]['user'].lastName + "</td>");
        tr.append("<td>" + json[i]['main'][i].id + "</td>");
        $('table').append(tr);

    }


});

如何让它显示所有实例？

4 个答案:

答案 0 :(得分：4)

问题是因为您没有正确访问该对象。 json是一个只包含单个项目的数组。相反，您需要遍历json[0].main数组，如下所示：

var tr;
for (var i = 0; i < json[0].main.length; i++) {
    var obj = json[0].main[i];
    tr = $('<tr/>');
    tr.append("<td>" + obj.id + "</td>");
    tr.append("<td>" + obj.user.username + "</td>");
    tr.append("<td>" + obj.carid + "</td>");
    tr.append("<td>" + obj.user.firstName + " " + obj.user.lastName + "</td>");
    tr.append("<td>" + obj.id + "</td>");
    $('table').append(tr);
}

工作示例： 

var json = [{
    "main": [{
        "id": "7561",
        "secid": "5",
        "carid": "653",
        "phaseId": "0",
        "title": "idea 2",
        "text": "<p>dfggfd</p>",
        "created": "2016-05-19 10:52:37",
        "user": {
            "id": "24793",
            "username": "myUsername",
            "firstName": "myName",
            "lastName": "mySurname",
            "bio": "",
            "town": "London",
            "country": "United Kingdom",
            "avatar": "na",
            "confirmed": true,
            "hasEml": true,
            "haspsword": true,
            "hEV": true,
            "hasTermsAgreed": false,
            "hasCommunityTermsAgreed": true,
            "profileQuestionAns": {
                "userfield_14": {
                    "id": 6223,
                    "user": 24793,
                    "userfield": 14,
                    "data": "fdszgsfdgsd"
                },
                "userfield_15": {
                    "id": 6224,
                    "user": 24793,
                    "userfield": 15,
                    "data": "Blah"
                }
            },
            "usertype": "2",
            "ha": true,
            "language": null,
            "walkthroughpsed": "1",
            "registerEmlSent": false,
            "hasCompletedOnBoarding": true
        },
        "co": [],
        "vtingData": {
            "values": {
                "1": "1"
            },
            "totalVTs": "1",
            "score": "1",
            "type": "up",
            "mostpopVT": "1",
            "userVT": 0,
            "isClosed": 0
        },
        "fileData": [],
        "cmtCount": 0,
        "canBeVTd": true,
        "mlestId": "53",
        "mlestStatus": 0,
        "mlestTimeout": 0,
        "pstfields": [],
        "modLabel": null,
        "tags": [],
        "modStatus": "0"
    }, {
        "id": "7560",
        "secid": "5",
        "carid": "653",
        "phaseId": "0",
        "title": "idea 1",
        "text": "<p>adsfasdf</p>",
        "created": "2016-05-19 10:33:48",
        "user": {
            "id": "24787",
            "username": "Ar_2",
            "firstName": "myName",
            "lastName": "mySurname",
            "bio": "",
            "town": "London",
            "country": "United Kingdom",
            "avatar": "sdffds",
            "confirmed": true,
            "hasEml": true,
            "haspsword": true,
            "hEV": true,
            "hasTermsAgreed": false,
            "hasCommunityTermsAgreed": true,
            "profileQuestionAns": {
                "userfield_14": {
                    "id": 6208,
                    "user": 24787,
                    "userfield": 14,
                    "data": "aDASDASD"
                },
                "userfield_15": {
                    "id": 6209,
                    "user": 24787,
                    "userfield": 15,
                    "data": "Blah"
                }
            },
            "usertype": "2",
            "ha": true,
            "language": null,
            "walkthroughpsed": "1",
            "registerEmlSent": false,
            "hasCompletedOnBoarding": true
        },
        "co": [],
        "vtingData": {
            "values": {
                "1": "2"
            },
            "totalVTs": "2",
            "score": "2",
            "type": "up",
            "mostpopVT": "1",
            "userVT": 0,
            "isClosed": 0
        },
        "fileData": [],
        "cmtCount": 0,
        "canBeVTd": true,
        "mlestId": "53",
        "mlestStatus": 0,
        "mlestTimeout": 0,
        "pstfields": [],
        "modLabel": null,
        "tags": [],
        "modStatus": "0"
    }]
}];

var tr;
for (var i = 0; i < json[0].main.length; i++) {
    var obj = json[0].main[i];
    tr = $('<tr/>');
    tr.append("<td>" + obj.id + "</td>");
    tr.append("<td>" + obj.user.username + "</td>");
    tr.append("<td>" + obj.carid + "</td>");
    tr.append("<td>" + obj.user.firstName + " " + obj.user.lastName + "</td>");
    tr.append("<td>" + obj.id + "</td>");
    $('table').append(tr);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

答案 1 :(得分：1)

将数据放入格式化程序后，很明显您的数据集只包含一个元素，即＆＃34; main＆＃34;。 因此，json.length等于1，您的循环只迭代一次。

您可能希望迭代主要项目。

答案 2 :(得分：1)

根据你的json对象的构建方式，你需要这个循环遍历数组：

for (var i = 0; i < json[0][main].length; i++) {
  record = json[0][main][i];
  doSomethingWith(record)
}

你的json对象第一个'level'是一个包含1个项目的数组：main。内部main是包含您想要循环的数据的数组。

答案 3 :(得分：0)

json是一个对象数组。因此json[0].main将返回main数组。使用forEach循环播放

var _getMain= json[0].main;
console.log(json[0])
var tr;
_getMain.forEach(function(item){
  tr = $('<tr/>');
        tr.append("<td>" + item.id + "</td>");
        tr.append("<td>" + item.user.username + "</td>");
        tr.append("<td>" + item.carid + "</td>");
        tr.append("<td>" + item.user.firstName + " " + item.user.lastName + "</td>");
        tr.append("<td>" + item.id + "</td>");
        $('#table').append(tr);

})

注意：ideas找不到任何密钥。不确定这个代码片段的工作原理

json[i]['ideas'][i]['user'].lastName

操纵DOM也是一个代价高昂的过程。而是尝试创建DOM并立即追加所有

JSFIDDLE

相关问题
最新问题