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 ?

Trainman

@JanDvorak He is here to learn. No need to flame him. – Fawnfawna

groups is an array as well. – Harbard

@Fawnfawna I admit, it was badly formulated. All I wanted was to point him to the right resources, though. – Wellington

Answer 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

Discomfit

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

@Trainman What is the last one? =) – Discomfit

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 ? – Trainman

@Trainman 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? – Discomfit

I meant the last one created. – Trainman

@Trainman 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 =) – Discomfit

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

Spoilsport

Answer 3

I think you need something like:

var text= data.response.venue.tips.groups[0].items[1].text;

Harbard

Answer 4

try this

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

Genotype

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