Handling JSON objects with JQuery

Question

Hello i am having a weird issue where i am trying to get the id of the last element in a json object array.

$.ajax ({
    type: 'POST',
    url: 'post-get.php',
    data:
    {
        group: group,
        postid: postid
    },
    cache: false,
    dataType: 'json',
    success: function(response) {
        if (response.length > 0)
        {
            $.each(response, function(index, element) {
                var p = "";
                p += "<div class='col-md-12' style='padding:0'>"; // start col-md-12
                p += "<div class='user'>"; // start user
                p += "<div class='pic'>"; // start pic
                p += "<img src='img/timthumb.php?src=";
                p += element[2];
                p += "&w=100&h=100&a=t' />";
                p += "</div>"; // end pic
                p += "<span class='username'>"; // start username
                p += element[1];
                p += "</span>"; // end username
                p += "</div>";// end user
                p += "<div class='content'>"; // start content
                p += element[4];
                p += "</div>"; // end content
                p += "<div class='clear'></div>";
                p += "<div class='info' style='margin-top:20px;'>"; // start info
                p += "<div class='datetime'>Posted on: ";// start datetime
                p += element[5];
                p += "</div>"; // end datetime
                p += "<div class='clear'></div>";
                p += "</div>";  // end info
                p += "</div>"; // end col-md-12
                p += "<div class='clear'></div>";

                $(".post").html($(".post").html() + p + element[6]);
            });
        }
    }
});

on this line: $(".post").html($(".post").html() + p + element[6]); element[6] refers to the post id, it should add the post id of each post and display it on the page but it keeps on repeating only the id of the first post in the returned array.

This is the response returned from the server.

[
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "13",
        "4": "8",
        "5": "2014-06-04 23:57:12",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "13",
        "Post": "8",
        "DatePosted": "2014-06-04 23:57:12",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "12",
        "4": "Hi",
        "5": "2014-06-03 16:18:49",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "12",
        "Post": "Hi",
        "DatePosted": "2014-06-03 16:18:49",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "11",
        "4": "Hello there.",
        "5": "2014-06-03 16:17:52",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "11",
        "Post": "Hello there.",
        "DatePosted": "2014-06-03 16:17:52",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "9",
        "4": "sascas sa ",
        "5": "2014-06-02 23:15:55",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "9",
        "Post": "sascas sa ",
        "DatePosted": "2014-06-02 23:15:55",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "8",
        "4": "sascas sa ",
        "5": "2014-06-02 23:15:55",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "8",
        "Post": "sascas sa ",
        "DatePosted": "2014-06-02 23:15:55",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "7",
        "4": "It would be no good adding this functionality if people using my themes couldn’t make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.",
        "5": "2014-06-02 23:09:11",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "7",
        "Post": "It would be no good adding this functionality if people using my themes couldn’t make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.",
        "DatePosted": "2014-06-02 23:09:11",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "6",
        "4": "It would be no good adding this functionality if people using my themes couldn’t make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.",
        "5": "2014-06-02 23:08:41",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "6",
        "Post": "It would be no good adding this functionality if people using my themes couldn’t make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.",
        "DatePosted": "2014-06-02 23:08:41",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    },
    {
        "0": "1",
        "1": "Phi Phi XY",
        "2": "data/users/1/world cup logo.png",
        "3": "5",
        "4": "Sup sup!!",
        "5": "2014-06-02 23:07:50",
        "6": "8",
        "7": "Arsenal3",
        "8": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg",
        "UserID": "1",
        "Displayname": "Phi Phi XY",
        "Displaypic": "data/users/1/world cup logo.png",
        "PostID": "5",
        "Post": "Sup sup!!",
        "DatePosted": "2014-06-02 23:07:50",
        "GroupID": "8",
        "Name": "Arsenal3",
        "Banner": "data/groups/Arsenal3/banner/Gb Wallpapers (15).jpg"
    }
]

Answer 1

you can use

response[index].propertyname

For more detail see

jquery loop on Json data using $.each

Answer 2

It seems i used the wrong index which i realized after Jason P's comment. I have made the corection and it works now.

Answer 3

Try using accessing the property name like this, as you have data repeated two times you can remove repeated data from service. and also can access by real property names instead of number that would be easy to understand.

var p = "";
p += "<div class='col-md-12' style='padding:0'>"; // start col-md-12
p += "<div class='user'>"; // start user
p += "<div class='pic'>"; // start pic
p += "<img src='img/timthumb.php?src=";
p += element["2"];
p += "&w=100&h=100&a=t' />";
p += "</div>"; // end pic
p += "<span class='username'>"; // start username
p += element["1"];
p += "</span>"; // end username
p += "</div>";// end user
p += "<div class='content'>"; // start content
p += element["4"];
p += "</div>"; // end content
p += "<div class='clear'></div>";
p += "<div class='info' style='margin-top:20px;'>"; // start info
p += "<div class='datetime'>Posted on: ";// start datetime
p += element["5"];
p += "</div>"; // end datetime
p += "<div class='clear'></div>";
p += "</div>";  // end info
p += "</div>"; // end col-md-12
p += "<div class='clear'></div>";

$(".post").html($(".post").html() + p + element["6"]);