Question

我正在尝试将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>

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

});

只有示例获得值烂番茄评级，但是您可以凭想象力搜索并在OMDB的JSON响应中找到任何内容。

Answer 2

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

在html中显示OMDB Api JSON数据

2 个答案: