在 html 中显示 OMDB Api JSON 数据答案

【问题标题】：Displaying OMDB Api JSON data in html在 html 中显示 OMDB Api JSON 数据
【发布时间】：2017-01-23 20:35:45
【问题描述】：

我正在尝试将 OMDB API 集成到我的电影列表中。有一个简单的 bash 脚本可以生成 CSV 文件，其中包含指定目录中的所有电影。我认为如果我将添加从 OMDB API 获取电影信息的功能可能会很好。所以我试图在点击电影后加载 JSON 数据。问题是我不知道如何以正确的方式显示电影数据。我刚开始用 JS 编写代码，提前感谢您的任何建议。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('.link').click(function(){
          var page=$(this).attr('rel')

          $('#display').load(page);
          console.log(page)
        });
      })
    </script>
    <div class="container">


      <h1>List</h1>
      <div id="display">
        movie info
      </div>
      <br />
      <hr />
      <br />
      <ul>
        <?php

        //Open the file.
        $fileHandle = fopen("list.csv", "r");

        //Loop through the CSV rows.
        while (($row = fgetcsv($fileHandle, 0, ",")) !== FALSE) {
            echo '<li class="link" rel="http://www.omdbapi.com/?t=' . $row[1] . '&y=' . $row[2] . '&plot=short&r=json">' . $row[0] . '</li><br />';
        }
        ?>
      </ul>
        </div>
  </body>
</html>

【问题讨论】：

欢迎来到 Stack Overflow！您可以阅读如何How to Ask 一个问题并创建一个minimal reproducible example。这让我们更容易为您提供帮助。

标签： jquery html json ajax

【解决方案1】：

$(document).ready(function($) {
var api_key = "YOU OMDB API KEY";
var film = $("#idIMDB").text(); //GET TEXT FROM DOM, THIS CONTENTS IMDB ID EX: tt6320628
$.getJSON("http://www.omdbapi.com/?i=" +
    escape(film) +
    "&apikey=" +
    api_key,
    function(json) {
        //RottenTomatoes
        var rottentomatoes = json.Ratings[1].Value;
            $('#RT').html(rottentomatoes); // ADD VALUE DOM ID #RT
    });
return arguments.callee;

});

只有示例获得价值 rotten-tomatoes 评级，但请发挥想象力，在 OMDB 的 JSON 响应中搜索并找到任何内容。

【讨论】：

【解决方案2】：

我建议您加载 csv to javascript 对象并使用某些库（例如 React）创建链接列表，然后创建组件以显示有关所选电影的数据。

【讨论】：