ajax call using JSONP returns error Uncaught Refer

Question

The following code is derived from an existing Knockout jsfiddle which does not work now, mostly due to being out of date with current versions of knockout and jquery. I found this fiddle listed as an example on the Knockout GitHub wiki recipes link: https://github.com/knockout/knockout/wiki/Asynchronous-Dependent-Observables.

The fiddle in this link does not work, even after I did some updating of the code. I am weak on the Ajax call and need help with understanding why this does not work.

The original fiddle is listed in the link http: //jsfiddle.net/uv5AG/

I have modified it in a new jsfiddle which is more up-to-date and works except for the AJAX call. It is found at : http://jsfiddle.net/n4gy3/Gf3gW/3/

My use case is I want to use the features as documented in the GitHub site, to build a flexiable viewModel with knockout using the asyncDependentObservable. I have also tried this in a dotnet web site which give the same error, so this should not be related to jsfiddle odd way of handling cross site AJAX requests.

I believe the major issue is the code throws an exception when running the following ajax request.

self.fetchedData = asyncDependentObservable(function () {
            return $.ajax("http://api.worldbank.org/country?prefix=?", {
                dataType: "jsonp",
                data: { per_page: this.numberToShow, region: this.chosenRegion, format: "jsonp" }
            }).pipe(function (results) { console.log(results); debugger; return results[1]; });

I modified the chaining of the pipe() method, and replaced with then(), because pipe was deprecated in later version of JQuery.

looking at the results from the ajax call it appears to run successful and jquery returns the following, which javascript tries to execute and this appears to throw the error. It might be the problem is .then() is not the correct way to fix the example. I have noticed that the then block never executes. If I replace with completed() it does execute but I get the same error. I am confused.

jquery19102754115150310099_1392753827782([{"page": 1,"pages": 22,"per_page": "10","total": 214}, [{"id": "ABW","iso2Code": "AW","name": "Aruba","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Oranjestad","longitude": "-70.0167","latitude": "12.5167"}, {"id": "AFG","iso2Code": "AF","name": "Afghanistan","region": {"id": "SAS","value": "South Asia"},"adminregion": {"id": "SAS","value": "South Asia"},"incomeLevel": {"id": "LIC","value": "Low income"},"lendingType": {"id": "IDX","value": "IDA"},"capitalCity": "Kabul","longitude": "69.1761","latitude": "34.5228"}, {"id": "AGO","iso2Code": "AO","name": "Angola","region": {"id": "SSF","value": "Sub-Saharan Africa (all income levels)"},"adminregion": {"id": "SSA","value": "Sub-Saharan Africa (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IDB","value": "Blend"},"capitalCity": "Luanda","longitude": "13.242","latitude": "-8.81155"}, {"id": "ALB","iso2Code": "AL","name": "Albania","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "ECA","value": "Europe & Central Asia (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Tirane","longitude": "19.8172","latitude": "41.3317"}, {"id": "AND","iso2Code": "AD","name": "Andorra","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Andorra la Vella","longitude": "1.5218","latitude": "42.5075"}, {"id": "ARE","iso2Code": "AE","name": "United Arab Emirates","region": {"id": "MEA","value": "Middle East & North Africa (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Abu Dhabi","longitude": "54.3705","latitude": "24.4764"}, {"id": "ARG","iso2Code": "AR","name": "Argentina","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "LAC","value": "Latin America & Caribbean (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Buenos Aires","longitude": "-58.4173","latitude": "-34.6118"}, {"id": "ARM","iso2Code": "AM","name": "Armenia","region": {"id": "ECS","value": "Europe & Central Asia (all income levels)"},"adminregion": {"id": "ECA","value": "Europe & Central Asia (developing only)"},"incomeLevel": {"id": "LMC","value": "Lower middle income"},"lendingType": {"id": "IDB","value": "Blend"},"capitalCity": "Yerevan","longitude": "44.509","latitude": "40.1596"}, {"id": "ASM","iso2Code": "AS","name": "American Samoa","region": {"id": "EAS","value": "East Asia & Pacific (all income levels)"},"adminregion": {"id": "EAP","value": "East Asia & Pacific (developing only)"},"incomeLevel": {"id": "UMC","value": "Upper middle income"},"lendingType": {"id": "LNX","value": "Not classified"},"capitalCity": "Pago Pago","longitude": "-170.691","latitude": "-14.2846"}, {"id": "ATG","iso2Code": "AG","name": "Antigua and Barbuda","region": {"id": "LCN","value": "Latin America & Caribbean (all income levels)"},"adminregion": {"id": "","value": ""},"incomeLevel": {"id": "NOC","value": "High income: nonOECD"},"lendingType": {"id": "IBD","value": "IBRD"},"capitalCity": "Saint John's","longitude": "-61.8456","latitude": "17.1175"}]])

Answer 1

Take a very close look at the url being generated and the response. The url is:

http://api.worldbank.org/country?prefix=jQuery2100915805617813021_1392757688413&per_page=10&region=WLD&format=jsonp&_=1392757688414

and the response is:

jquery2100915805617813021_1392757688413([{"page":1,"pages"...

Notice how the url has jQuery210 and the response is jquery210? that's where the error is, javascript is case sensitive. The API is failing to return the callback name requested, and is instead returning it in all lowercase. To solve this, simply specify your own callback name in all lowercase.

$.ajax("http://api.worldbank.org/country?prefix=?", {
    jsonpCallback: "myjsonpcallbacknameinalllowercase",    
    dataType: "jsonp",

Now the url will be:

http://api.worldbank.org/country?prefix=myjsonpcallbacknameinalllowercase&per_page=10&region=WLD&format=jsonp&_=1392757688414

I suggest also contacting the developers behind the api and informing them of this... bug.