Displaying OMDB Api JSON data in html

Question

I am trying to integrate OMDB API to my movie's list. There is simple bash script that generate CSV file with all movies in specified directory. I thought that might be good if I will add feature to get movie info from OMDB API. So I'm trying to load JSON data after clicking on movie. The problem is that I don't know how to display movie data in proper way. I'm just begining to code in JS, thanks in advance for any advices.

Here the code:

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

Welcome to Stack Overflow! You can read up on how to How to Ask a question and create a minimal reproducible example. That makes it easier for us to help you. — Katie
– Katie, Commented Jan 23, 2017 at 21:44

zappee · Accepted Answer · 2019-05-19 16:55:46Z

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;

});

Only example get value rotten-tomatoes rating, but with your imagination search and find anything in the JSON response from OMDB.

edited May 19, 2019 at 16:55

zappee

23.2k15 gold badges97 silver badges157 bronze badges

answered May 19, 2019 at 15:31

Carlos Guerrero

134 bronze badges

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

Comments

Arkadiusz Wieczorek · Accepted Answer · 2017-05-09 20:36:15Z

0

I suggest you load csv to javascript object and create list of links with some library for example React, and next create component to showing data about selected movie.

answered May 9, 2017 at 20:36

Arkadiusz Wieczorek

4511 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Displaying OMDB Api JSON data in html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related