I want to fetch some JSON data from an link using JQuery. JSON file is like below:


    {
      "test_data": [
        {
          "name": "test1",
          "url": "http://testsite.com/testurl/",
          "params": {
            "p1": "abc",
            "p2": "def",
            "p3": "ghi"
          }
        },
        {
          "name": "test2",
          "url": "http://testsite.com/testurl2/",
          "params": {
            "p1": "jkl",
            "p2": "mno",
            "p3": "pqr"
          }
        }
      ]
    }

How can I do that?

  • For some problem this question is posted twice in link http://doctype.com/fetch-json-data-jquery-2 Chanchal Kumar Ghosh about 6 years ago
  • Duplicate question is deleted. Chanchal Kumar Ghosh about 6 years ago

1 answer

danwellman 5600
1
point
This was chosen as the best answer

Where is the JSON coming from? A server on your own domain? Getting JSON data can be as simple as:

$.getJSON(url to json, function(data) {
  $('.result').html('<p>' + data[0].name + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

If the JSON is on a remote domain you can still access it pretty easily with JSONP, see the example near the bottom of the jQuery documentation page.

Answered about 6 years ago by danwellman
  • The JSON is coming from remote domain. But when I am trying using the code below it given some errors: "XMLHttpRequest cannot load testsite2.com/api. Origin null is not allowed by Access-Control-Allow-Origin." and "Uncaught TypeError: Cannot read property 'test_data' of null" and "Failed to load resource". My code is given below: <pre><code>$.getJSON(STACK_AUTH_API_SITE, function(data) { $('#data').html('<p>' + data.test_data[0].name + '</p>' + '<p>' + data.test_data[0].url + '</p>'); });</code></pre> Chanchal Kumar Ghosh about 6 years ago
  • Ok well the second error is because of the 1st one anyway, so fix that and they should both go away ;) The format of the request is wrong for JSONP, you need to move the anonymous function out of the method argument and define it as a normal callback function, then add the name of the callback function to the URL as a query string danwellman about 6 years ago