JQuery not returning any information for the JSON file

Question

I am working on S3. In a bucket i have a browser.json file, jquery.js, and index.html. In my index.html I am writing a script that reads my JSON file. Here is what my code looks like...

!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <script>
        $.getJSON('https://s3.amazonaws.com/plxscreenshots/browser.json', function(data) {
            alert(data.date)
        });
    </script>
    <p> I hope this works!</p>
</body>

I am still pretty new to html/javascript but I feel like this should be working and it is not, any suggestions?

Rule 1 when JavaScript doesn't work: **Look at the error console**. You have this error: *XMLHttpRequest cannot load https://s3.amazonaws.com/plxscreenshots/browser.json. Origin http://run.jsbin.com is not allowed by Access-Control-Allow-Origin.* — Quentin, Jul 19 '13 at 14:23
if I request the file, I only get the date. Try this: `alert(data.Date)` — Michael Walter, Jul 19 '13 at 14:23
The JSON it is sending back does not appear to be properly formatted and does not contain a `value1` property, just a `date`. — Corion, Jul 19 '13 at 14:24
You are getting this: AccessDenied Access Denied 0813367144E81B13 aL2Nd7MbNlw1nw3bjPbXS/W9MrG/0NeHaBiTXCnGzCbBicH/M2lyoRF2WV53M88s — fGo, Jul 19 '13 at 14:25
Have u checked the MIME type allowed in your IIS manager.. I had an issue and this resolved it — AnaMaria, Jul 19 '13 at 14:26
@quentin: I dont think this is a duplicate. Looks perfectly valid to me. Yes the info provided is minimal and there is scope for improvement on that front. — AnaMaria, Jul 19 '13 at 14:29

score 1 · Accepted Answer · edited May 23 '17 at 12:21

So you have a couple of issues which are going on here.

First you have the same-origins problem, which has been addressed elsewhere,
Second, you have poorly formatted JSON in your JSON file, and
third you don't have a value1 property.

I would expect your JSON file to look more like this:

{"date": "2013-07-19", "value1": 5678 }

Notice how both the keys and the date is quoted? In JSON, you have to quote anything which isn't a number, an object ([] and {}), or a boolean (true or false). Also notice how there is no trailing comma?

The first two problems will cause an error before you even get feedback and because you have no error handler, it will fail silently (though hopefully you're at least seeing an error in your JavaScript console). You can make this a little easier by adding .error(function(a) { alert("error"); console.log(e); }) to the end of your function. Something like:

$.getJSON(<my-url>, function(data) {
     alert(data.value1)
}).error(function(a) { alert("error"); console.log(e);});

score 0 · Answer 2 · answered Jul 19 '13 at 14:25

0

1) The same-origin domain policy will not allow you to load from a file on a different domain using AJax.

2) Your file doesn't contain JSON. It contains:

{date : 2013-07-19 , }

JSON would look like:

{"date": "2013-07-19"}

answered Jul 19 '13 at 14:25

Paul

139,544
27
275
264

JQuery not returning any information for the JSON file

2 Answers2