Exploring ways to retrieve nested values from JSON data using the Instagram API and Javascript

Trying to modify the script found at https://github.com/bigflannel/bigflannel-Instafeed in order to access Instagram photos on a website. Unfortunately, the script does not currently support displaying photo comments. I attempted to make modifications that would allow for this feature, but it resulted in an undefined value being returned. The script utilizes JavaScript to retrieve data from the API.

[
{
    "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"
    }
}];

Below is a function used to access data from the above 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; }

Despite everything working well, the following code snippet returns an undefined value (an attempt to access comments data):

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

If there are any suggestions on how to resolve this issue, your assistance would be greatly appreciated. Thank you! :)

Answer №1

In order to access the actual text from the comments.data array, you need to reference it at

imageData[imageCount].comments.data[commentCount].text
. Here is an example of how you can achieve 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 />';
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Understanding the functionality of app.listen() and app.get() in the context of Express and Hapi

What is the best way to use only native modules in Node.js to recreate functionalities similar to app.listen() and app.get() using http module with a constructor? var app = function(opts) { this.token= opts.token } app.prototype.get = function(call ...

Displaying JSON data after a successful AJAX call

I am currently facing an issue with my controller. I have a query that returns data in JSON format, and I'm trying to display this data in the view using AJAX and jQuery. However, every time I try to output the data, it shows as [object Object]. I sus ...

Transform an array of string values that occur multiple times into an array of objects organized by their index

Assuming I have a list structured as follows: [ "id1", "01-01-2019", "name1", "€ 5,60", "id2", "02-01-2019", "name2", "€ 5,70", "id3", "03-01-2019", "name3", "€ 5,20", ... ] and my goal is to transform it into a list of JSON objects ...

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

I am currently troubleshooting my code to interact with a REST API. My platform of choice is "EspoCRM" and I aim to utilize its API functionalities. The official documentation recommends using Basic Authentication in this format: "Authorization: Basic " ...

Angular 1.5 component causing Typescript compiler error due to missing semi-colon

I am encountering a semi-colon error in TypeScript while compiling the following Angular component. Everything looks correct to me, but the error only appears when I insert the this.$routeConfig array: export class AppComponent implements ng.IComponentOp ...

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

I am working on a project that involves two dropdown menus. The options for the first dropdown menu are stored in a file called constant.ts. Depending on the selection made in the first dropdown, the options for the second dropdown will change accordingly. ...

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

Exploring elements with Watir WebDriver and ExtJS

Currently, I am performing an acceptance test using watir-webdriver with Ruby. I have a question regarding ExtJs support with Watir webdriver. Is it possible to locate elements that are dynamically generated by ExtJS? I have attempted the following: @brow ...

Error: Python expected a string or bytes-like objectTypeError

Currently, I am attempting to tally the number of components based on the data from a json file. Outlined below is my current approach: # Function to count the components def get_component_count(data, component_name, locator_name, counter=0): if re.m ...

Adjusting the width of a div element using a button

I am currently diving into the world of JavaScript, React, and Node.js. My current challenge involves attempting to adjust the width of a div element using a button. However, I keep encountering the same frustrating error message stating "Cannot read prope ...

Is there a one-liner to efficiently eliminate all instances of a specific sub-string from an array using the filter

In search of a solution to filter an array and eliminate all instances of substrings, similar to removing entire strings as shown below: const x = ["don't delete", "delete", "delete", "don't delete", "delete", "don't delete"] x= x.filter(i ...

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

What is the solution for the error message "TypeError: app.use() is seeking a middleware function"?

I am a beginner in Node.js and have encountered an issue in my passport.js or signupLogin.js file with the error message, app.use() requires a middleware function that I am struggling to resolve. I suspect it may be related to the signupLogin route, as th ...

Camel Fusion Route failing to convert JSON to JSON

Currently experimenting with the Camel Fuse tooling to perform JSON to JSON conversion using a data mapper. Successful conversions from XML to JSON have already been achieved through data mappers. An issue arises when attempting to receive a JSON object, ...

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

Exploring the TypeScript compiler API to read and make updates to objects is an interesting

I'm delving into the world of the typescript compiler API and it seems like there's something I am overlooking. I am trying to find a way to update a specific object in a .ts file using the compiler API. Current file - some-constant.ts export co ...

Retrieve all valid JSON data from a string in Java

There's a scenario I'm dealing with where JSON strings are separated by commas. Here's an example string: {Valid JSON String},{Valid JSON String},{Valid JSON String} I need to extract each valid JSON string and save them in an ArrayList. ...

Encountered an issue while attempting npm install, with the error message "Error: Undefined variable standalone_static_library in binding.gyp" and node-sass chokidar error

I've been working on updating a Ruby on Rails and React project from 3 years ago. However, I encountered an issue while trying to npm install. $ npm install gyp: Undefined variable standalone_static_library in binding.gyp while trying to load binding ...

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

Tips for extracting the most deeply nested object in a JSON file using JavaScript

Is it possible to access the innermost object without knowing the path names? Consider this JSON example: const data = { first: { second: { third: {innerObject} } } ...