Unable to retrieve data from JSON file using jQuery

Question

I am new to Javascript and jQuery and I am trying to retrieve data from a JSON file using getJSON method in jQuery. However I am unable to do so. Here is the code:

HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>JSON Test</title>
</head>

<body>
<script type="text/javascript">
    console.log("Hi");
    $.getJSON('red.json', function(data){
    console.log("This is the Data" + data["Live Births"])});
    var response = $.getJSON( "red.json", function() {
        console.log( "success" );
       })
       .done(function() {
         console.log( "second success" );
       })
       .fail(function() {
         console.log( "error" );
       })
       .always(function() {
         console.log( "complete" );
       });
</script>


</body>
</html>

JSON:

{"Live Births" : [
        [11.925, 76.9502],
        [11.896, 76.9492],
        [11.990, 76.9602],
        [11.911, 76.9402],
        [11.978, 76.8902]
    ],

    "Still Births" : [
        [11.986, 76.9402],
        [11.896, 76.9602],
        [11.966, 76.8992],
        [11.916, 76.8902],
        [11.946, 76.9002]
    ]}

Awaiting your responses.

Regards,

Jones

A fiddle Demo to the problem is added

where is your red.json located?

Mivaweb
– Mivaweb

2014-05-19 11:48:01 +00:00
Commented May 19, 2014 at 11:48 — Mivaweb
– Mivaweb, Commented May 19, 2014 at 11:48
Check console to see the error and update your question.

Aamir Afridi
– Aamir Afridi

2014-05-19 11:49:34 +00:00
Commented May 19, 2014 at 11:49 — Aamir Afridi
– Aamir Afridi, Commented May 19, 2014 at 11:49
There is no error. My console is open.

Jones
– Jones

2014-05-19 11:49:58 +00:00
Commented May 19, 2014 at 11:49 — Jones
– Jones, Commented May 19, 2014 at 11:49
add a ; after your console.log('Hi')

Mivaweb
– Mivaweb

2014-05-19 11:50:02 +00:00
Commented May 19, 2014 at 11:50 — Mivaweb
– Mivaweb, Commented May 19, 2014 at 11:50
Tried that. Still not working.

Jones
– Jones

2014-05-19 11:50:48 +00:00
Commented May 19, 2014 at 11:50 — Jones
– Jones, Commented May 19, 2014 at 11:50

Mivaweb · Accepted Answer · 2014-05-19 12:17:42Z

1

I have implement your code at my local server and it works fine. Here is what I used:

HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>JSON Test</title>
</head>

<body>
<script type="text/javascript">
    alert("Hi");
    $.getJSON('red.json', function(data){
    alert("This is the Data" + data["Live Births"])});
</script>


</body>
</html>

The only difference is the link to the jQuery library ( maybe is this the problem at your side? ).

JSON (red.json):

{
    "Live Births" : [
        [11.925, 76.9502],
        [11.896, 76.9492],
        [11.990, 76.9602],
        [11.911, 76.9402],
        [11.978, 76.8902]
    ],

    "Still Births" : [
        [11.986, 76.9402],
        [11.896, 76.9602],
        [11.966, 76.8992],
        [11.916, 76.8902],
        [11.946, 76.9002]
    ]
}

Located in the same directory as your html file.

Edit:

This is what I have done:

Create a new file ( index.html ) and paste your html code in it. Then create a new file red.json with your json data. Put those two files in one directory and open index.html.

edited May 19, 2014 at 12:17

answered May 19, 2014 at 11:58

Mivaweb

5,7523 gold badges30 silver badges60 bronze badges

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

11 Comments

Jones Over a year ago

I have just copied it right away and tested it and it doesn't seem to work! I am running from the localhost so that cant be the error. This issue has been eating me up since a while now.

Mivaweb Over a year ago

Do you get the first alert message 'Hi'?

Jones Over a year ago

Yes I am getting that.

Jones Over a year ago

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT apiluckyleapnet-a.akamaihd.net/… Hi (index):12 error (index):22 complete (index):25 ----> This is my console after following your instructions. I am looking at other ways of implementing this now.

Mivaweb Over a year ago

Copy the content of jQuery library to seperated file called jquery.js and put this in the same directory as your index.html and red.json. Also change the url of the script tag to jquery.js. And now?

|

biswajitGhosh · Accepted Answer · 2014-05-19 12:00:04Z

0

Please try with this

<script type="text/javascript">
  console.log("Hi")
  $(function(){
    $.getJSON('red.json', function(data){
    console.log("This is the Data" + data)});
  });

// please add these handler

var response = $.getJSON( "red.json", function() {
 console.log( "success" );
})
.done(function() {
  console.log( "second success" );
})
.fail(function() {
  console.log( "error" );
})
.always(function() {
  console.log( "complete" );
});


</script>

edited May 19, 2014 at 12:00

answered May 19, 2014 at 11:51

biswajitGhosh

1571 gold badge2 silver badges17 bronze badges

3 Comments

Jones Over a year ago

I tried that as well. It is still not working. Is there something wrong with the JSON file format?

biswajitGhosh Over a year ago

Please follow VDesign note once. You have correct JSON format.

Jones Over a year ago

The ouput I get to that is - 'hi' 'error' 'complete'

Collectives™ on Stack Overflow

Unable to retrieve data from JSON file using jQuery

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related