how to load json file using jsonp and jquery

Question

I have a file abcjsn.json in remote url like: http://abc.com/abcjsn.json The content of the Json file is :

    {
"root": {
    "node": [
        {
            "@attributes": {
                "id": "6",
                "name": "Europe",
                "description": "European Curricula"
            },
            "node": {
                "@attributes": {
                    "id": "2553",
                    "name": "Ireland",
                    "description": "Irish Curricula"
                },
                "node": {
                    "@attributes": {
                        "id": "3083",
                        "name": "Primary School Curriculum",
                        "description": "Primary Curriculum"
                    }
                }
            }
        },
        {
            "@attributes": {
                "id": "7",
                "name": "Middle East",
                "description": "Middle Eastern Curricula"
            }
        },
        {
            "@attributes": {
                "id": "8",
                "name": "North America",
                "description": "North American Curricula"
            }
        },
        {
            "@attributes": {
                "id": "9",
                "name": "South America",
                "description": "South American Curricula"
            }
        }
    ]
}

}

and i am using the following code to access it:

var url = "http://abc.com/abcjsn.json"

        $.ajax({
          url: url,
          dataType: 'jsonp',
          data:  {},
          success: function(data) { alert(data); },
          jsonp: 'jsonp'
        });

But i am not able to access it. it newer goes to alert. how can i do it.

Answer 1

The server should return you something like

myCallBackFunction('{....}')

and your myCallBackFunction should call jQuery.parseJSON(...)

and then it will be fine.

Answer 2

Assuming the server is wrapping the JSON in a function, then this should work:

var url = "http://abc.com/abcjsn.json?callback=?";

$.getJSON(url, function(data){
  console.log(data);
}

Notice the callback parameter in the url.

Answer 3

This will allow you to access from Cross Domain:

---

The JSON in your question above should be wrapped in a function call:

STEP 1: Make the function available:

Ensure that you have myCallbackFunc defined on the global window object beforehand (this function will be executed as soon as the script-tag is loaded). For ex:

window.myCallbackFunc = function(jsonData) {
   // do something with the jsondata
}

STEP 2: Prepare the remote JSON file:

Ensure that the remote JSON file is calling the myCallbackFunc function with the JSON passed to it. For ex:

myCallbackFunction({
  "root": {...}
});

STEP 3: Prepare and load the script tag:

Then, you should request this file with script tag like so:

var scriptEl = document.createElement('script');
scriptEl.src =  "http://example.com/abcjsn.json?callback=myCallbackFunc";
scriptEl.type = "text/javascript";
document.body.appendChild(scriptEl);

Note : We need to add the callback in the query-string with its value having the name of our function (myCallbackFunc in this case). This function will be executed once the file is loaded.

Good Luck...

Answer 4

Do this

 var url = "http://abc.com/abcjsn.json"

    $.ajax({
      url: url,
      dataType: 'json',
      data:  {},
      success: function(data) { alert(data); }
    });

EDIT

JsonP is removed because if you are using jsonp the source you are donwloading should look like this

myLocalFunc({
    // Contnet of that json;
});

When it is loaded your function called myLocalFunc is executed. The one you are calling is just a json. I assumed that you have crossdomain access.

EDIT

If you don't have cross domain access then you have to implement a proxy in your server that will request remote server and give the result to you or user some crossdomain techniques discussed here. Note however that they are applicable only if you have an access to the target domain.