jquery .each 数组 json答案

【问题标题】：jquery .each array jsonjquery .each 数组 json
【发布时间】：2017-01-19 17:08:11
【问题描述】：

我是新来的，这是我的第一篇文章，我希望有人能帮助我。我也是 jquery/jquery-mobile、API 和 JSON 的新手

我用的是aspx网站，不知道有没有帮助。

我在 jquery mobile 的帮助下在移动设备上搜索电影，API 和我的 JSON 文件是一个数组，但我不知道如何一次获得超过 1 部电影。

所以我希望有人可以帮助我。

  $(document).ready(function() {

    $("#Search_B").click(function() {

      $("#intro_h3").hide();

      var S_Value = $('#GetMovies').val();
      var url = 'http://www.omdbapi.com/?s=' + S_Value;
      var json = $.getJSON(url);

      console.log(url);


      $("#Search_B").each(json, function(i, value) {

        $('#movie').html('');
        $('#movie').append('<h2> Title: ' + value.Search[0].Title + ' </h2>');
        $('#movie').append('<h3> Year: ' + value.Search[0].Year + ' </h3>');
        $('#movie').append('<h3> Type: ' + value.Search[0].Type + ' </h3>');
        $('#movie').append('<a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> <img src=' + movie.Search[0].Poster + ' /> </a>');
        $('#movie').append('<br><a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> Imdb </a>');
      });

    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>
  <form id="form1" runat="server">
    <div>

      <div data-role="page" id="page1">
        <div data-role="header">
          <h1>Welcome to the online movie searcher</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="#page1">Home</a>
              </li>
              <li><a href="#page2">Options</a>
              </li>
            </ul>
          </div>
        </div>

        <div data-role="main" class="ui-content">

          <!-- <input type="text" id="EnterMovie" /> -->
          <input type="search" id="GetMovies" />
          <input type="button" id="Search_B" value="Search" />

          <div id="movie"></div>


          <h3 id="intro_h3">Search for a movie up top!</h3>


        </div>

        <div data-role="footer">
          <h1>My Footer</h1>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

【问题讨论】：

标签： jquery arrays json jquery-mobile

【解决方案1】：

对代码工作所做的更改总结：

您正在使用$.html('') 清除$.each() 调用中的#movie 部分。相反，您应该只在循环外执行一次。
$('#movie') 是使用 '#movie' 作为参数执行的 jQuery 函数，它需要处理时间。您可以链接 $.append() 方法以节省处理时间。
$.getJSON(url, callback) 是一个异步方法，您的json 变量只有在API 完成工作后才能在callback 函数中使用。
$.each(array, function(key, val) {}) 无法将 JSON 对象用作数组。第一个参数必须是可迭代的json.Search。

您的最终代码应如下所示：

$(document).ready(function () {
  $("#Search_B").click(function () {
    $("#intro_h3").hide();
    $('#movie').html('');

    var S_Value = $('#GetMovies').val();
    var url = 'http://www.omdbapi.com/?s=' + S_Value;

    $.getJSON(url, function waitAPIthen (json) {
        $.each(json.Search, function (key, item) {
          $('#movie')
            .append('<h2> Title: ' + item.Title + ' </h2>')
            .append('<h3> Year: ' + item.Year + ' </h3>')
            .append('<h3> Type: ' + item.Type + ' </h3>')
            .append('<a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> <img src=' + item.Poster + ' /> </a>')
            .append('<br><a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> Imdb </a>');
        });
    });
});

【讨论】：

thx 不知道 :) 我也将 value.Search[0] 替换为 value.Search[i]，但它仍然不起作用：/ 但是谢谢
循环执行一次还是不执行？
根本没有，就像按钮不起作用。我可以按下它但没有任何反应
在$.each() 之前尝试console.log(json);，您的控制台中的结果是什么？我更新了我的答案，改为使用json.value...
试试我更新的答案，它是否会在您的控制台中抛出任何错误（F12）？