Load external JSON file

Question

I can't seem to get JSON when it's from an external file. When I write it inline, it works fine. But when I created a file called test.json and copied the JSON in to it, I never get the contents.

Here's my HTML and JavaScript. I should note that both HTML and JSON files are within the same folder.

What am I doing wrong?

<!DOCTYPE html> <html> <head> <title>JSON Sandbox</title> </head> <body> <h2>JSON Sandbox</h2> <p id="demo"></p> <script type="text/javascript"> var text = $.getJSON({ dataType : "json", url : "test.json", data : data, success : window.alert("JSON Aquired.") }); var obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone; </script> </body> </html>

Here's my test.json file

{ "name":"John Johnson", "street":"Oslo West 1", "phone":"111 1234567" }

Try and check : Create a *.js file inspite of *.json..

Shubh
– Shubh

2014-09-16 14:29:24 +00:00
Commented Sep 16, 2014 at 14:29 — Shubh
– Shubh, Commented Sep 16, 2014 at 14:29
Don't edit the answer into your question, please.

Cerbrus
– Cerbrus

2014-09-16 14:32:59 +00:00
Commented Sep 16, 2014 at 14:32 — Cerbrus
– Cerbrus, Commented Sep 16, 2014 at 14:32
That didn't do it. Thanks.

Frantumn
– Frantumn

2014-09-16 14:33:01 +00:00
Commented Sep 16, 2014 at 14:33 — Frantumn
– Frantumn, Commented Sep 16, 2014 at 14:33

user2400931 · Accepted Answer · 2014-09-16 14:56:51Z

Change the file extension to js. and change the html file as below:

<!DOCTYPE html> <html> <head> <title>JSON Sandbox</title> <script src="jquery-1.8.2.min.js"></script> </head> <body> <h2>JSON Sandbox</h2> <p id="demo"></p> <script type="text/javascript"> var obj = new Object(); var error = new Object(); $.getJSON('test.js').done(function (data) { obj = data; document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone; }).error(function (err) { error = err; }); </script> </body> </html>

Still not working, you can check it out at dev.tessierit.com/json/index.html
try downloading the googleapis js file to local folder and then referencing it as <script src="jquery-1.8.2.min.js"></script>
There is absolutely no reason anything suggested in this answer after the code should have made a difference. I'm not sure what happened, but kudos, I guess.

Cerbrus · Accepted Answer · 2014-09-16 14:29:10Z

0

Your success handler is defined incorrectly.

Replace:

success : window.alert("JSON Aquired.")

With:

success : function(data){ window.alert("JSON Aquired.") // `data` is the returned object: document.getElementById("demo").innerHTML = data.name + "<br>" + data.street + "<br>" + data.phone; }

You need to do what you want to do with the data, in the success handler, because $.getJSON is an AJAX call, which means it's asynchronous.

answered Sep 16, 2014 at 14:29

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

9 Comments

Ryan Kinal Over a year ago

You'll also have to move the code that uses the data into the success handler.

Cerbrus Over a year ago

@RyanKinal: just noticed that, adding it to my answer.

Cerbrus Over a year ago

@Frantumn: Are you getting any errors? What do you see when you console.log(data) in the success handler?

Frantumn Over a year ago

Uncaught ReferenceError: $ is not defined this is on the var text line.

Cerbrus Over a year ago

Make sure you've included jQuery properly.

|

Collectives™ on Stack Overflow

Load external JSON file

2 Answers 2

3 Comments

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Linked

Related