Accessing JSON with JQuery

Question

I need to access some JSON with JQuery. For some reason, it's not working and since the getJSON method fails silently, I can't figure out what's wrong. I have checked that the JSON Url is correct. Thanks!

HTML:

<html>
<head>
    <script src="//code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
        $.getJSON('../src/json/baseball.json', function(data) {
            $("#add").html(data.baseball[0].levels[0].games[0].versus);
        });
        });
    </script>   
</head>
<body>
    <p id= "add"></p>
</body>
</html>

JSON:

{"baseball":
[{
    "gender":"boys",
    "levels":[
    {
        "level": "varsity",
        "games":[
        {
            "versus":"Fullerton",
            "homeaway":"Home",
            "month":"February",
            "date":"27",
            "year":"2012",
            "troyscore":"32",
            "vsscore":"41",
        },
        {
            "versus":"Sunny Hills",
            "homeaway":"Away",
            "month":"March",
            "date":"28",
            "year":"2012",
            "troyscore":"20",
            "vsscore":"17",
        }]
    },
    {
        "level": "jv",
        "games":[
        {
            "versus":"Sonora",
            "homeaway":"Home",
            "month":"January",
            "date":"20",
            "year":"2012",
            "troyscore":"15",
            "vsscore":"21",
        },
        {
            "versus":"Valencia",
            "homeaway":"Away",
            "month":"April",
            "date":"30",
            "year":"2012",
            "troyscore":"40",
            "vsscore":"1",
        }]
    }]
},
{
    "gender":"girls",
    "levels":[
    {
        "level": "varsity",
        "games":[
        {
            "versus":"Acacia",
            "homeaway":"Home",
            "month":"February",
            "date":"27",
            "year":"2012",
            "troyscore":"32",
            "vsscore":"41",
        },
        {
            "versus":"LV",
            "homeaway":"Away",
            "month":"March",
            "date":"28",
            "year":"2012",
            "troyscore":"20",
            "vsscore":"17",
        }]
    },
    {
        "level": "jv",
        "games":[
        {
            "versus":"Commonwealth",
            "homeaway":"Home",
            "month":"January",
            "date":"20",
            "year":"2012",
            "troyscore":"15",
            "vsscore":"21",
        },
        {
            "versus":"Xishan",
            "homeaway":"Away",
            "month":"April",
            "date":"30",
            "year":"2012",
            "troyscore":"40",
            "vsscore":"1",
        }]
    }]
}]
}

Although it's common for URLs to act kinda like filesystem paths, AFAIK it's not required -- and the server might not know (or, for security reasons, might actively forget) that .. means "the parent directory". Did you try an absolute URL? — cHao
– cHao, Commented Feb 12, 2012 at 23:44
What do you see in the console if you stick console.log(data) in front of $("#add") ...? — fncomp
– fncomp, Commented Feb 12, 2012 at 23:48

karim79 · Accepted Answer · 2012-02-13 21:40:42Z

3

Each of the final properties of your inner objects have trailing commas, which makes your JSON badly formed. Just try pasting it into jsonlint.com. It will wine at every object's last property.

    {
        "versus":"Fullerton",
        "homeaway":"Home",
        "month":"February",
        "date":"27",
        "year":"2012",
        "troyscore":"32",
        "vsscore":"41", <-- borked JSON
    },

Complaint:

Parse error on line 67:
...                    },                 
-----------------------^
Expecting 'STRING'

$.getJSON will fail silently if the returned JSON is not strictly well-formed. I want to provide a reference from the docs, but it appears that the jQuery site is down....bleh.

edited Feb 13, 2012 at 21:40

answered Feb 12, 2012 at 23:46

karim79

343k67 gold badges420 silver badges409 bronze badges

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

8 Comments

ShankarSangoli Over a year ago

That will still work in non IE browsers and it can't be the reason for not working.

karim79 Over a year ago

It's not necessarily about browser, it's about jQuery only accepting well-formed JSON.

user1106925 Over a year ago

@ShankarSangoli: This is JSON, not JavaScript. They are different specifications with different rules. jsfiddle.net/5n8Qz

user1106925 Over a year ago

@ShankarSangoli: That's just not correct. JSON is a text format whose structure is modeled after JavaScript, but it is not identical to JavaScript. See the example I added to my comment above. Parsing the JSON text that includes the trailing comma results in a SyntaxError in Chrome.

user1106925 Over a year ago

@ShankarSangoli: But then it isn't JSON. Then it's JavaScript. That's why the browser doesn't care. They're different specifications with different rules.

|

Collectives™ on Stack Overflow

Accessing JSON with JQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related