JSON бросить неопределенное в HTML - PullRequest
Новая
       1

JSON бросить неопределенное в HTML

1 голос
/ 08 апреля 2020

Пожалуйста, помогите мне. Я новичок в интеграции API. Я хочу показать постер, заголовок и год по URL-адресу API. вот код, который я попробовал, когда я регистрируюсь, он показывает JSON в массиве, но его бросок не определен в переднем конце, пожалуйста, помогите.

Заранее спасибо 

      <html>
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <title>Welcome</title>

</head>

<body>
    <div class="container">
        <div class="table-responsive">
            <h1>Movies</h1>
            <table class="table table-bordered table-responsive table-striped" id="movies_table">
                <tr>
                    <th>Poster</th>
                    <th>Name</th>
                    <th>Year</th>
                </tr>       

            </table>
        </div>
    </div>
<div id="my_div" class="hide">"Thank You"</div>

</body>
  <script>

  $(document).ready(function(){
           $.getJSON("http://www.omdbapi.com/?apikey=d8ecb486&s=red", function(data) {
                console.log(data);
            var movies = '';
            $.each(data, function(key,value){
              movies += '<tr>';
              movies += '<td>'+value.poster+'</td>';
              movies += '<td>'+value.title+'</td>';
              movies += '<td>'+value.year+'</td>';
              movies += '</tr>';
            });
            $('#movies_table').append(movies);

           });
  });
</script>
</html>

вот Структура API 

{"Search":[{"Title":"RED","Year":"2010","imdbID":"tt1245526","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg"},{"Title":"Red Dragon","Year":"2002","imdbID":"tt0289765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTQ4MDgzNjM5MF5BMl5BanBnXkFtZTYwMjUwMzY2._V1_SX300.jpg"},{"Title":"The Hunt for Red October","Year":"1990","imdbID":"tt0099810","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BY2Y5NWVjMmQtMWRmOC00ZTg3LWI3YWQtZGI2MWUwNWQ4OWQ2XkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX300.jpg"},{"Title":"The Thin Red Line","Year":"1998","imdbID":"tt0120863","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYjEzMTM2NjAtNWFmZC00MTVlLTgyMmQtMGQyNTFjZDk5N2NmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ@._V1_SX300.jpg"},{"Title":"RED 2","Year":"2013","imdbID":"tt1821694","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjI2ODQ4ODY3Nl5BMl5BanBnXkFtZTcwNTc2NzE1OQ@@._V1_SX300.jpg"},{"Title":"Red Sparrow","Year":"2018","imdbID":"tt2873282","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTA3MDkxOTc4NDdeQTJeQWpwZ15BbWU4MDAxNzgyNTQz._V1_SX300.jpg"},{"Title":"Red Eye","Year":"2005","imdbID":"tt0421239","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzAxNjc1ODczOF5BMl5BanBnXkFtZTcwMjE3MjEzMw@@._V1_SX300.jpg"},{"Title":"Red Riding Hood","Year":"2011","imdbID":"tt1486185","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTc4NjYyMzQ5MV5BMl5BanBnXkFtZTcwNjE5Mjc3NA@@._V1_SX300.jpg"},{"Title":"Three Colors: Red","Year":"1994","imdbID":"tt0111495","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTg1MmNiMjItMmY4Yy00ZDQ3LThjMzYtZGQ0ZTQzNTdkMGQ1L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"},{"Title":"Red Dawn","Year":"2012","imdbID":"tt1234719","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjI0MDAwMzA1M15BMl5BanBnXkFtZTcwNzIxMjY3OA@@._V1_SX300.jpg"}],"totalResults":"3993","Response":"True"}

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

есть несколько вещей

Во-первых, ваши фактические данные попадают в массив поиска

Во-вторых, ключ, который вы пытаетесь прочитать, начинается с Uppercase

затем если вы перебираете поисковый массив, ключ будет иметь индекс, например 0,1,2 ... n, и вам нужно прочитать значение

, просто обновите эту логику c, и вы готовы к go

var movies = '';
$.each(response.Search, function(key,value){
  movies += `<tr>
  <td>${value.Poster}</td>
  <td>${value.Title}</td>
  <td>${value.Year}</td>
  </tr>`;
});
$('#movies_table').append(movies);
1 голос
/ 08 апреля 2020

Проблема связана с каждым вашим l oop, вам нужно использовать key.poster вместо value.poster. Первый аргумент l oop указывает элемент данных. 

  $(document).ready(function(){
       $.getJSON("http://www.omdbapi.com/?apikey=d8ecb486&s=red", function(data) {
            console.log(data);
        var movies = '';
        $.each(data, function(key,value){
          movies += '<tr>';
          movies += '<td>'+key.poster+'</td>';
          movies += '<td>'+key.title+'</td>';
          movies += '<td>'+key.year+'</td>';
          movies += '</tr>';
        });
        $('#movies_table').append(movies);

       });
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...