CODEWITHSUNDEEP
javascriptjqueryjson
James Williams
James Williams

Reputation: 11

Jquery not reading from JSON file

Ok, so here is the code for my HTML:

<div id="contentholder">
    <div class="personcard">
        <img src="http://placehold.it/400x400" />
        <h2>Matej Vydra <span>Striker</span></h2>
        <p>This is a paragraph about Watford Striker Matej Vydra, it doesnt really make much sense, but its great for testing and lolz.</p>
    </div>
</div>

and here is the JS and JSON files:

$(document).ready(function () {
    $.getJSON('json/currentsquad.json', function (currentsquad) {
        var output = "<div class='personcard'>";
        for (var i in currentsquad.players) {
            output += "<img src='" + currentsquad.players[i].image + "'/> <h2>" + currentsquad.players[i].name + "<span>" + currentsquad.players[i].position + "</span> </h2>";
        }
        output += "</div>";
        document.getElementById("contentholder").innerHTML = output;
    });
});

json:

{
    "players": [
        {
            "image": "http://placehold.it/400x400",
            "name": "Matej Vydra",
            "position": "Striker"
        },
        {
            "image": "http://placehold.it/400x400",
            "name": "Troy Deeney",
            "position": "Striker"
        },
]
}

And the problem is that the code is not getting shown to the user, I have tried searching previously and therefore tried running it on localhost but the issue stays the same and the JSON isn't shown to the user. Thanks in advance.

Upvotes: 0

Views: 103

Answers (1)

Felipe Skinner
Felipe Skinner

Reputation: 16636

Your JSON is invalid. While the JavaScript object literal notation allows for a trailing comma, the JSON standard does not. So if this is an accurate representation of the JSON you're sending, you'll need to remove the comma after the last object in the players Array.

{
    "players": [
        {
            "image": "http://placehold.it/400x400",
            "name": "Matej Vydra",
            "position": "Striker"
        },
        {
            "image": "http://placehold.it/400x400",
            "name": "Troy Deeney",
            "position": "Striker"
        }
    ]
}

Upvotes: 2

Related Questions