Accessing deeply nested values in JSONP data with JavaScript

Question

I am a beginner at JavaScript, and am attempting to learn by diving in and building something. I may be in over my head trying to use JSONP on my first project, but I am trying to create a script that will use the LaunchLibrary API to display upcoming rocket launches.

Specifically, I am calling this JSONP object.

Up to now, my code only attempts to access certain points of the data for each launch, and store them in an array so that I can access them later when I want to display the data.

function launchDisplay(data){
     //Gather and store relevant data

     var rocketName = [];    

     for(i = 0; i < data.launches.length; i++){
        rocketName.push(data.launches[i].rocket.name);
     }
     console.log(rocketName);
    }

However, this code generates an

Uncaught SyntaxError: Unexpected token :

in the console on what appears to be the first key:value pair. The JSON object is deeply nested, and starts with a "total":10, which is the number of launches returned by my search criteria. The second item in the object is where my data is, a launches array, which contains all of the launches returned by the search. There are other objects nested inside of the launches object, which I need to access.

Any help on what I am doing wrong?

EDIT: The code now is working. It appears the API I was using needed JSON, not JSONP. Also, the functions were running synchronous, not asynchronous. Here is the working JSFiddle, for reference.

How are you calling the JSONP? That URL does not seem to support JSONP. It only returns JSON. — 4castle, Aug 15 '16 at 04:46
Your code works. Open the console in this fiddle: https://jsfiddle.net/45bbf6zm/ — Gerardo Furtado, Aug 15 '16 at 04:51
Very encouraging that this works for others, but not sure why it wont work in my console. Here is the entire code I am running. https://jsfiddle.net/ncox85/up23pteg/ — ncox85, Aug 15 '16 at 05:04

score 0 · Accepted Answer · answered Aug 15 '16 at 04:48

0

I just attempted the thing you did in my browser's console. It seems to be working fine here with JSON data. So any other thing you can add to help me recreate the problem?

answered Aug 15 '16 at 04:48

reznov9185

43
6

Very encouraging that this works for others, but not sure why it wont work in my console. Here is the entire code I am running. jsfiddle.net/ncox85/up23pteg – ncox85 Aug 15 '16 at 05:04
This is where I am testing my code. It is generating the errors there. http://ccs-strategies.com/data/index.html – ncox85 Aug 15 '16 at 05:09
Hey, I am not seeing your assignment of `data` variable anywhere! This is what causing the error I think. – reznov9185 Aug 15 '16 at 05:42
I think maybe that is my problem? launchDisplay is a callback function for the JSONP data. My understanding is that using ?callback=launchDisplay places the returned JSON object inside of the launchDisplay function, making the 'data' part of launchDisplay(data) equal to the returned JSON object. Is this an incorrect understanding of how this all works? – ncox85 Aug 15 '16 at 05:56
You are calling a function `launchDisplay` with a variable named `data`. Just point your jsonp/json object or function that you want to operate on. – reznov9185 Aug 15 '16 at 06:22
I'm not sure I understand. I thought that launchDisplay is a callback function that handles the data queried by the JSONP call causing the parameter data to be assigned to the JSONP object when I used ?callback=launchDisplay. Is this wrong? How do I assign the returned object to the data variable? – ncox85 Aug 15 '16 at 06:33
I think this will help you understand how to do it. [stackoverflow solution](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – reznov9185 Aug 15 '16 at 07:19
1

After reading through that question/answers, I came up with the code in this [jsfiddle](https://jsfiddle.net/ncox85/fvt660ux/3/). It now waits for the json to be returned before attempting to run my function, but I still don't understand how to pass the returned data into my function to process it. – ncox85 Aug 15 '16 at 16:29
I figured it out. The code in my last jsfiddle worked, but I forgot to parse the string into an object. – ncox85 Aug 15 '16 at 17:53

Accessing deeply nested values in JSONP data with JavaScript

1 Answers1