Hello.
I am having trouble trying to use/understand JSON get requests using jQuery.
Here is my code:
var getPostcode = function(){
var tPostcode = $('#postcode').val();
var foundPostcode = $.getJSON("https://api.postcodes.io/postcodes/EH88DX" + "?callback=?");
console.log(foundPostcode);
// proJSONdatat = JSON.parse(foundPostcode);
var town = $.parseJSON(foundPostcode.msoa);
$('#output').html('<p>' + town + '</p>');
};
The output of the section tag I have set with the ID output only ever outputs " undefined "
When looking in the console of the browser I can see the value outputs. - I have tried following lines out output i.e. foundPostcode.result or foundPostcode.responseJSON.result.postcode
Not sure why I am not getting the data output, and only getting ’ undefined ’
Thanks in advanced.
Personally I don’t like doing string concantenation inside method calls. And you say you see it in the console output. Can you post a example of what that is? You log the whole object to console but are looking for a specific value in the HTML output line.
I’m not to sure on best methods, still learning.
Here is the console output:
( sorry I couldn’t get the text neatly )
So logicly; well, to me anyway. I’m assuming I can just follow those values down. responseJSON.result.admin_district
Not sure if I am missing anything. I have been trying to get the info from w3schools. Although, it is fairly vague.
The getjson method is asynchronous, so you need to execute the code below in a callback function on sucess. Your object is undefined, because it isnt finished doing its thing.
Here is an explanaition
https://api.jquery.com/jquery.getjson/
Ive never really used this shorthand either. But you should be able to just pass a function to it as the second parameter. You could also just do the full ajax thing or $.get. In the end all are $.ajax. Just shorthands for it.
$.ajax({
dataType: "json",
url: "https://someapi.com/get",
success: function(data) {
//here you have the data
}
});
2 Likes
The link above has helped me immensely! Thank you.
Edit —
Managed to shorthand it to this:
$.getJSON( "https://api.postcodes.io/postcodes/EH88DX", function( json ) {
console.log(json.result.msoa);
});
Thank you for your help 
Yeah, I also was on my phone so I could not really test this and was only taking a rough glance at the documentation. So I just copied what I know works fine.
If thats really all you wanted, you know it’s the very first result when you google ‘jquery getjson’. 
You would have gotten shafted if you posted this on stackoverflow (but you know thats probably exactly why you should post many of your questions here instead). I thought you probably dont know what async is so you need some amount of explanaition to point you to where the problem is.
Lots of things in js are async and they usually arent called ‘somethingAsync’ but the other way around ‘somethingSync’ would be the synchronous version. You arent suppposed to use the synced versions of most things ever as it either results in your ui stopping for 2 seconds if the rest api takes 2 seconds to respond or the performance of nodejs going from amazingly good and scaleable to a complete shitshow as node only uses 1 thread to serve ALL requests. So if you occupy the thread nothing at all will work. Interestingly enough its also one of the very reasons its so fast to begin with. Because its only using one thread to serve clients instead of spawning a thread for each request it takes up way less resources in many cases.
Either way glad to have helped you out.
Yeah you’re right - Top result on that search term. I was on the track of " use get api " - My search terms ain’t the best lol, w3schools is usually pretty good. Just couldn’t get the concept of how it worked into my brain. Guess it was throwing me because it was going external.
Meh, stackoverflow… lol
Really appreciate the help
