Understanding getJSON

pillphil

I'm trying to understand how to convert a json response into an object.

This isn't working but it's one of the thing's ive tried.

var matches = $.getJSON('https://world-cup-json.herokuapp.com/matches');
	var matchesObj = JSON.parse(matches);

Every example seems to manipulate the response within the getJSON call, but I want to create an object that can be used outside the function, is that possible?

matches doesn't seem to b getting assigned the json, just a response? I 've tried declaring matchesObj first and assigning the json from inside the function, but that doesn't seem to work.

S.M.B.

The reason it's done within the success callback in the examples is because an AJAX request will be asynchronous. You don't know how long it will take for your get request to return the relevant data. In your example the second line of code would run instantly after the first.

The first line of code returns a jqXHR object which will contain the data. The problem is you don't know when that data is available. You can use the .done method to assign the response to a variable but what do you plan on doing with the data?

pillphil

I have two json files. One is taken from the web, it returns results of world cup games and the other is one I made myself, it returns peoples selections from a sweepstakes we're doing at work.

I want to use both files to create a table so we don't have to manually calculate everyone's score.

Would the solution to call the second json from within done and combine the data there?

function getActualResults() {
	var matchesObj;
	$.getJSON('https://world-cup-json.herokuapp.com/matches'
							, function(data) {
								console.log(data);
							})
							.done(function(data) {
								matchesObj = data;
								console.log(matchesObj);
							})
							;
	// var matchesObj = JSON.parse(matches);
	
	console.log(matchesObj); // Doesn't work, presumable since done hasn't completed at the time of runing
}

S.M.B.

Yeah, making the second request inside the callback of the first request will give you access to both results to combine the data and render it on the page.

This can get messy very quickly which is often called callback hell. "Promises" are now available in JS to make things look a little tidier but no need to go down that route for now.

pillphil

Cheers, that should get me going

John_Mc

Promises are definitely the way to go. You can fire off both calls (assuming they are not dependent on each other) and then wait for both to complete before proceeding

pillphil

hmm, I think I can see the benefit of that now. I'm making the same calls over and over to get the same data but to process in a different way and the load time is going through the roof...

S.M.B.

Oh you definitely don't want to be making multiple calls to the same endpoints if the result isn't changing regularly regardless of whether you are using promises or a callback within a callback.

You either want to structure your code so that you're only making each call once or/and cache the results of those calls if you can.

pillphil

S.M.B. wrote: »

Oh you definitely don't want to be making multiple calls to the same endpoints if the result isn't changing regularly regardless of whether you are using promises or a callback within a callback.

You either want to structure your code so that you're only making each call once or/and cache the results of those calls if you can.

Ah, I think I see now. i should be passing the two datasets into three different functions to generate the tables instead of three different calls to the endpoints.

I can definitely cache one set of data as it will not change. I don't know if there's any point caching the other. It's retrieving football scores, so it should probably always look for new data from the endpoint?

I feel like dealing with asynchronous communication has caused me to forget everything I knew about programming...