gafasmill gafasmill - 4 months ago 9
Javascript Question

Javascript Loop not displaying more than 1 instance of the data

I am having issues with some code where it's not displaying more than 1 instance of the data.

Here is the full data and code:

The Data:

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


The Javascript Code:

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

}


});


How can I make it display all instances?

Answer

The issue is because you are not correctly accessing the object. json is an array which contains only a single item. Instead you need to loop through through the json[0].main array, like this:

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

Working example:

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>