尝试使用 JavaScript/jQuery 将 JSON 从 OMDb API 解析为 HTML Bootstrap table

Question

我知道有很多这样的问题，但我不明白为什么这行不通。我正在尝试从 OMDb API 生成的 JSON 获取数据并将其传递到 table 但是当我加载页面时没有任何反应。

我是初学者，如有任何帮助，我们将不胜感激。

<!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>

JSON 文件如下所示：

{"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"}

Answer 1

json 响应是一个对象而不是数组，用这个替换你的回调：

        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);

尝试使用 JavaScript/jQuery 将 JSON 从 OMDb API 解析为 HTML Bootstrap table

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

html

javascript

jquery

json

imdb