3

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?

7
  • 5
    json is an array with one element. (And as an aside, it's not JSON.) Perhaps you want to loop over the json[0].main array rather than the json array? Commented Jul 14, 2016 at 9:02
  • json is not JSON. But this another issue. Commented Jul 14, 2016 at 9:03
  • You can try first parsing it and then using json.main.length instead of json.length Commented Jul 14, 2016 at 9:05
  • You overwrite obj on each iteration and never do anything with it. What's the purpose of that variable? Commented Jul 14, 2016 at 9:06
  • OK, if we forget the JSON part, how can I get it to loop all entries, as it's only looping 1. The code works and it reads and appends the data but only 1. Commented Jul 14, 2016 at 9:07

4 Answers 4

3

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>

Sign up to request clarification or add additional context in comments.

Comments

0

After throwing your Data into a formatter, it becomes obvious that your dataset only contains one element, namely "main". Therefore, json.length equals 1 and your loop only iterates once.

You may want to iterate over the items in main instead.

Comments

0

According to the way your json object is built, you need this to loop through the array:

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

Your json object first 'level' is an array with 1 item: main. Inside main is the array with data you want to loop through.

Comments

0

json is an array of object. So json[0].main will return the main array. Use forEach to loop through it

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

})

Note: I could not find any key by ideas. Not sure how you this snippet will work

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

Also manipulating DOM is costly process. Instead try to create the DOM and append all at once

JSFIDDLE

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.