Trying to parse JSON from OMDb API into HTML Bootstrap table using JavaScript/jQuery

Question

I know there are a ton of questions like this but I can't understand why this won't work. I'm trying to get the data from the JSON produced by the OMDb API and pass it into the table but when I load the page nothing happens.

I'm a beginner so any help would be appreciated.

<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>IMDb Information</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script type="text/javascript">

    $(document).ready(function () {
        var url = "http://www.omdbapi.com/?t=2012";
        $.getJSON(url,
        function (json) {
            var tr;
            tr = $('<tr/>');
            tr.append("<td><img src=" + json[i].Poster + " width='200' height='297'></td>");
            tr.append("<td>" + json[i].Title + "</td>");
            tr.append("<td>" + json[i].Year + "</td>");
            tr.append("<td>" + json[i].Rated + "</td>");
            tr.append("<td>" + json[i].Runtime + "</td>");
            tr.append("<td>" + json[i].Genre + "</td>");
            tr.append("<td>" + json[i].Director + "</td>");
            tr.append("<td>" + json[i].Actors + "</td>");
            tr.append("<td>" + json[i].Plot + "</td>");
            $('#imdb').append(tr);
        });
    });


</script>

</head>


<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Videos</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="catalogue.html">Catalogue</a></li>
                <li><a href="rent.html">Rent</a></li>
                <li><a href="return.html">Return</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="content">
    <h1>IMDb Information</h1>

    <table class="table table-hover" id="imdb">
        <thead>
            <tr>
                <th>Poster</th>
                <th>Title</th>
                <th>Year</th>
                <th>Rated</th>
                <th>Runtime</th>
                <th>Genre</th>
                <th>Director</th>
                <th>Actors</th>
                <th>Plot</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

</body>
</html>

The JSON file looks like this:

{"Title":"2012","Year":"2009","Rated":"PG-13","Released":"13 Nov 2009","Runtime":"158 min","Genre":"Action, Adventure, Sci-Fi","Director":"Roland Emmerich","Writer":"Roland Emmerich, Harald Kloser","Actors":"John Cusack, Amanda Peet, Chiwetel Ejiofor, Thandie Newton","Plot":"A frustrated writer struggles to keep his family alive when a series of global catastrophes threatens to annihilate mankind.","Language":"English, French, Tibetan, Mandarin, Russian, Hindi, Portuguese, Latin, Italian","Country":"USA","Awards":"4 wins & 20 nominations.","Poster":"http://ia.media-imdb.com/images/M/MV5BMTY0MjEyODQzMF5BMl5BanBnXkFtZTcwMTczMjQ4Mg@@._V1_SX300.jpg","Metascore":"49","imdbRating":"5.8","imdbVotes":"256955","imdbID":"tt1190080","Type":"movie","Response":"True"}

Well, you are missing a loop in your success callback. Fixing that would most likely make everything work. — Daniel B
– Daniel B, Commented Aug 14, 2015 at 10:26
@Andy I don't see anything except for this in the debug window: The program '[7656] iisexpress.exe' has exited with code 0 (0x0). (I'm using Visual Studio Express for Web) — Ini
– Ini, Commented Aug 14, 2015 at 10:28
@Daniel B Would you mind sharing the code for the loop? Thanks. I had a loop before but it didn't work then either. Though I may have done it wrong. (Never mind it works now!) — Ini
– Ini, Commented Aug 14, 2015 at 10:29

Sofiene Djebali · Accepted Answer · 2015-08-14 10:29:57Z

4

The json response is an object and not an array, replace your callback with this :

        var tr;
        tr = $('<tr/>');
        tr.append("<td><img src=" + json.Poster + " width='200' height='297'></td>");
        tr.append("<td>" + json.Title + "</td>");
        tr.append("<td>" + json.Year + "</td>");
        tr.append("<td>" + json.Rated + "</td>");
        tr.append("<td>" + json.Runtime + "</td>");
        tr.append("<td>" + json.Genre + "</td>");
        tr.append("<td>" + json.Director + "</td>");
        tr.append("<td>" + json.Actors + "</td>");
        tr.append("<td>" + json.Plot + "</td>");
        $('#imdb').append(tr);

answered Aug 14, 2015 at 10:29

Sofiene Djebali

4,5481 gold badge24 silver badges28 bronze badges

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

1 Comment

Ini Over a year ago

Thank you! I can't believe I missed this. I knew it was something really straightforward.

Collectives™ on Stack Overflow

Trying to parse JSON from OMDb API into HTML Bootstrap table using JavaScript/jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related