如何使用Javascript从JSON Instagram API访问嵌套值

Question

Im trying to modify script from https://github.com/bigflannel/bigflannel-Instafeed to access Instagram Photos in Website. But it doesn't include feature to display photo comments. So, im trying to modify but it returns undefined value. The script uses javascript to access data from API. Example:

[
{
    "attribution": null,
    "tags": [

    ],
    "type": "image",
    "location": null,
    "comments": {
        "count": 2,
        "data": [
            {
                "created_time": "1389168592",
                "text": "Beautiful bridge!",
                "from": {
                    "username": "realwahyuputra",
                    "profile_picture": "http:\/\/images.ak.instagram.com\/profiles\/profile_180213154_75sq_1359089013.jpg",
                    "id": "180213154",
                    "full_name": "realwahyuputra"
                },
                "id": "628714182443349004"
            },
            {
                "created_time": "1389168601",
                "text": "also good views",
                "from": {
                    "username": "realwahyuputra",
                    "profile_picture": "http:\/\/images.ak.instagram.com\/profiles\/profile_180213154_75sq_1359089013.jpg",
                    "id": "180213154",
                    "full_name": "realwahyuputra"
                },
                "id": "628714254652486672"
            }
        ]
    },
    "filter": "Hefe",
    "created_time": "1350749506",
    "link": "http:\/\/instagram.com\/p\/RAqdlGyTSc\/",
    "likes": {
        "count": 0,
        "data": [

        ]
    },
    "images": {
        "low_resolution": {
            "url": "http:\/\/distilleryimage0.s3.amazonaws.com\/d87203101ad011e297b922000a1fa527_6.jpg",
            "width": 306,
            "height": 306
        },
        "thumbnail": {
            "url": "http:\/\/distilleryimage0.s3.amazonaws.com\/d87203101ad011e297b922000a1fa527_5.jpg",
            "width": 150,
            "height": 150
        },
        "standard_resolution": {
            "url": "http:\/\/distilleryimage0.s3.amazonaws.com\/d87203101ad011e297b922000a1fa527_7.jpg",
            "width": 612,
            "height": 612
        }
    },
    "users_in_photo": [

    ],
    "caption": {
        "created_time": "1350749545",
        "text": "From the office",
        "from": {
            "username": "bigflannel",
            "profile_picture": "http:\/\/images.ak.instagram.com\/profiles\/anonymousUser.jpg",
            "id": "240129684",
            "full_name": "Mike Hartley"
        },
        "id": "306431853609956969"
    },
    "user_has_liked": false,
    "id": "306431525321782428_240129684",
    "user": {
        "username": "bigflannel",
        "website": "",
        "profile_picture": "http:\/\/images.ak.instagram.com\/profiles\/anonymousUser.jpg",
        "full_name": "Mike Hartley",
        "bio": "",
        "id": "240129684"
    }
}];

Here's one of function to access data from that JSON:

function imageCaptionText(timestamp) {
var text = 'Filter: ' + imageData[imageCount].filter + '<br />'
if (imageData[imageCount].caption != null) {
    text = text + 'Caption: ' +  imageData[imageCount].caption.text + '<br />';
}
if (imageData[imageCount].likes.count > 0) {
    text = text + 'Likes: ' + imageData[imageCount].likes.count + '<br />';
}
if (imageData[imageCount].comments.count > 0) {
    text = text + 'Comments: ' + imageData[imageCount].comments.count + '<br />';
}
if (imageData[imageCount].comments.data != null) {
    text = text + 'Comments Data: ' + imageData[imageCount].comments.data.text + '<br />';
}
if (imageData[imageCount].location != null) {
    text = text + 'Location: ' + imageData[imageCount].location + '<br />';
}
var date = new Date(1000*timestamp);
text = text + 'Date: ' + date.toLocaleString() + '<br />';
text = text + '<a href="' + imageData[imageCount].link + '">On Instagram</a><br />';
return text; }

Everything goes fine except this code returns undefined value (I'm trying to create this to access comments data)

    if (imageData[imageCount].comments.data != null) {
    text = text + 'Comments Data: ' + imageData[imageCount].comments.data.text + '<br />';
}

How to make it works? Any help would be appreciated. Thanks :)

Answer 1

comments.data is an array, the actual text will be at imageData[imageCount].comments.data[commentCount].text so you have to do something like this:

if (imageData[imageCount].comments.data != null) {
    text = 'Comments Data:<br />';
    imageData[imageCount].comments.data.forEach(function(comment){
        text += comment.from.username + ': ' + comment.text + '<br />';
    });
}