JQuery get data from JSON array

Question

This is part of the JSON i get from foursquare.

JSON

tips: {
    count: 2,
    groups: [
    {
        type: "others",
        name: "Tips from others",
        count: 2,
        items: [
        {
            id: "4e53cf1e7d8b8e9188e20f00",
            createdAt: 1314115358,
            text: "najjači fitness centar u gradu",
            canonicalUrl: "https://foursquare.com/item/4e53cf1e7d8b8e9188e20f00",
            likes: {
                count: 2,
                groups: [
                {
                    type: "others",
                    count: 2,
                    items: []
                }],
                summary: "2 likes"
            },
            like: false,
            logView: true,
            todo: {
                count: 0
            },
            user: {
                id: "12855147",
                firstName: "Damir",
                lastName: "P.",
                gender: "male",
                photo: {
                    prefix: "https://irs1.4sqi.net/img/user/",
                    suffix: "/AYJWDN42LMGGD2QE.jpg"
                }
            }
        },
        {
            id: "4e549e39152098912f227203",
            createdAt: 1314168377,
            text: "ajd da vidimo hocu li znati ponoviti",
            canonicalUrl: "https://foursquare.com/item/4e549e39152098912f227203",
            likes: {
                count: 0,
                groups: []
            },
            like: false,
            logView: true,
            todo: {
                count: 0
            },
            user: {
                id: "12855147",
                firstName: "Damir",
                lastName: "P.",
                gender: "male",
                photo: {
                    prefix: "https://irs1.4sqi.net/img/user/",
                    suffix: "/AYJWDN42LMGGD2QE.jpg"
                }
            }
        }]
    }]
}

I need to get the last tip text , the user who wrote it and the date when he wrote/post it.

User: Damir P.

Date : 1314115358

Text: najjači fitness centar u gradu

I tried with JQuery and this works to fetch a non-array value:

$.getJSON(url, function(data){
    var text= data.response.venue.tips.groups.items.text;
    alert(text);
});

But it doesn't work with arrays.

Result : Uncaught TypeError: Cannot read property 'text' of undefined.

Also I tried with $.each, but with no effect.

$.getJSON(url, function(data){
    $.each(data.response.venue.tips.groups.items.text, function (index, value) {
        console.log(value);
    });
});

What am I doing wrong ?

Solution 1

You need to iterate both the groups and the items. $.each() takes a collection as first parameter and data.response.venue.tips.groups.items.text tries to point to a string. Both groups and items are arrays.

Verbose version:

$.getJSON(url, function (data) {

    // Iterate the groups first.
    $.each(data.response.venue.tips.groups, function (index, value) {

        // Get the items
        var items = this.items; // Here 'this' points to a 'group' in 'groups'

        // Iterate through items.
        $.each(items, function () {
            console.log(this.text); // Here 'this' points to an 'item' in 'items'
        });
    });
});

Or more simply:

$.getJSON(url, function (data) {
    $.each(data.response.venue.tips.groups, function (index, value) {
        $.each(this.items, function () {
            console.log(this.text);
        });
    });
});

---

In the JSON you specified, the last one would be:

$.getJSON(url, function (data) {
    // Get the 'items' from the first group.
    var items = data.response.venue.tips.groups[0].items;

    // Find the last index and the last item.
    var lastIndex = items.length - 1;
    var lastItem = items[lastIndex];

    console.log("User: " + lastItem.user.firstName + " " + lastItem.user.lastName);
    console.log("Date: " + lastItem.createdAt);
    console.log("Text: " + lastItem.text);
});

This would give you:

User: Damir P.
Date: 1314168377
Text: ajd da vidimo hocu li znati ponoviti

Solution 2

You're not looping over the items. Try this instead:

$.getJSON(url, function(data){
    $.each(data.response.venue.tips.groups.items, function (index, value) {
        console.log(this.text);
    });
});

Comments

[Vucko]

Excellent. This gets all of the data but how to get the last one ?

[Mario S]

@Vucko What is the last one? =)

[Vucko]

In this case, text najjači fitness centar u gradu is the last one. So is the last one item[0].text or item[1].text ? And how to approach this with your code ?

[Mario S]

@Vucko I have updated the answer. But the text you are talking about is the first in the array and not the last. By last, do you mean the last one in the array or the latest by the createdAt date?

[Vucko]

I meant the last one created.

[Mario S]

@Vucko Ok, then just do a sort on the createdAt in the items-array before fetching the item. Have a look here on how to sort an array. I'm sure you can manage that =)

[SagarPPanchal]

hello @satish can we use console.log(this.text); out each by creating an array?