Ajax query for JSON data not returning data

Question

I'm trying to use World Bank's API to obtain some data. This is how to query their database. Basically to query a country's information, I would need to go to this url:

http://api.worldbank.org/countries/"alpha2Code of the country"

In my code here (Link to CodePen code.) I use use the alpha2Code from a previous query to add to the World Bank query's URL. Here's the method:

getDetails(alpha2Code) {
  this.load('http://api.worldbank.org/countries/'+alpha2Code)
    .then((countryDetails) => {
      this.generateOverlay(countryDetails);
    });
},

the load() method is defined here:

load(url, type = 'json') {
  return $.ajax({
    dataType: type,
    url: url,
  });
},

According to World Bank's basic calling format, I would need to add

format=json

in order to receive response in JSON. Somehow I don't think it's actually obtaining anything from WorldBank.

The query to World Bank is suppose to give me details to put into the overlay that covers the country flags after a click.

Thank you in advance for the help!

Can you set breakpoints in your code to see if generateOverlay is even being called? Have you verified in the browser debugger tools that the response is coming back with the data you're expecting? — gpanders
– gpanders, Commented Mar 30, 2017 at 4:14

gpanders · Accepted Answer · 2017-03-30 04:26:08Z

1

One issue with the CodePen you shared that may or may not be the problem with your site is that the CodePen demo is loaded over HTTPS, but you're requesting an insecure resource (HTTP). Browsers don't like this and will usually block it.

Unfortunately, you can't just change the request to be HTTPS since the WorldBank API doesn't have its certificates sorted out, so those requests are blocked by the browser as well. One solution would be to load your site over HTTP; however, this is obviously not advisable if your page contains any user-sensitive information.

The better way is to use your own back-end server as a proxy. You can setup your own API on your server that queries the WorldBank API over HTTP and can then respond to your request over HTTPS. Of course, this assumes you have control over your backend which is not always the case.

edited Mar 30, 2017 at 4:26

answered Mar 30, 2017 at 4:17

gpanders

1,4312 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bismo Funyuns Over a year ago

I guess that might be the issue. Dang it, seems like I might have to look for another API. Thanks for the input though :)

Cyrus · Accepted Answer · 2017-03-30 03:22:43Z

0

You need to pass the desired result format in the query. For example, to query INDIA, you would need to change the url to :

http://api.worldbank.org/countries/IN?format=json

The resulting data received is like:

[{"page":1,"pages":1,"per_page":"50","total":1},[{"id":"IND","iso2Code":"IN","name":"India","region":{"id":"SAS","value":"South Asia"},"adminregion":{"id":"SAS","value":"South Asia"},"incomeLevel":{"id":"LMC","value":"Lower middle income"},"lendingType":{"id":"IBD","value":"IBRD"},"capitalCity":"New Delhi","longitude":"77.225","latitude":"28.6353"}]]

The default output is in XML format. Hence your code may not be working.

answered Mar 30, 2017 at 3:22

Cyrus

469 bronze badges

6 Comments

Bismo Funyuns Over a year ago

I tried that. I even wrote up a loadDetails method that sent: "http://...../"+alpha2Code+"?format=json" and it still didn't work :(

Cyrus Over a year ago

Sorry, i am getting blocked XMLHttpRequest cannot load api.worldbank.org/countries/IN. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '192.168.1.4' is therefore not allowed access.

gpanders Over a year ago

OP specified the format query param in his post. He is clearly already aware of it.

Cyrus Over a year ago

Where in the original code does "format=json" get passed to the server? He mentioned he is aware, but did not actually pass it anywhere in the code. Please double check before downvote.

gpanders Over a year ago

The dataType member on the $.ajax object does this by default. Had you actually used the CodePen link OP provided and tried it yourself, you would have seen that this was not the issue.

|

Collectives™ on Stack Overflow

Ajax query for JSON data not returning data

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related