JSON抛出HTML中未定义的

请帮助我,我是API集成的新手 我想从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>