控制台显示 AJAX 的不同数组描述 [重复]答案

【问题标题】：Console displaying different array descriptions for AJAX [duplicate]控制台显示 AJAX 的不同数组描述 [重复]
【发布时间】：2019-03-18 23:08:56
【问题描述】：

我有一个包含对象的数组，其中包含一个包含对象的数组。有点乱，但这正是 Google Books API 返回信息的方式。

var myList = [
        {kind:'book', totalItems:1, items: [{volumeInfo:{authors:['JRR Tolkien']},publishedDate:"1965",pageCount:355}]},
        {kind:'book', totalItems:1, items: [{volumeInfo:{authors:['HP Lovecraft']},publishedDate:"1930",pageCount:269}]},
        {kind:'book', totalItems:1, items: [{volumeInfo:{authors:['Oscar Wilde']},publishedDate:"1920",pageCount:400}]},
    ];
    
    console.log(myList);
    console.log(myList[1].items[0].pageCount);

我可以毫无问题地访问这里的所有内容。当我创建一个相同的数组时，除了在 jQuery 中使用 ajax 调用外，我无法访问任何对象或数组项。

var bookList = $(".book").map(function () {
    return this.id;
  }).get();

  console.log(bookList);

  var thelink = "https://www.googleapis.com/books/v1/volumes?q=isbn:";
  var allresults = [];

  for (var i = 0; i < bookList.length; i++) {
    $.ajax({
      url: thelink + bookList[i],
      dataType: 'json',
      type: 'get',
      cache: true,
      success: function (data) {
        allresults.push(data);
      }
    });
  };
  
  console.log(allresults[1].items[0].pageCount);

<!doctype html>
<html>

<head>
    <title>Google Books</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Input</h1>
    <div id="book-container">
        <div id="0618249060" class="book"></div>
        <div id="9780743258074" class="book"></div>
        <div id="9780345466457" class="book"></div>
    </div>
    <h1>Result</h1>
    <div id="resultContainer">
        <!--Put a bunch of stuff here-->
    </div>
</body>

</html>

据我了解，这些应该可以以完全相同的方式访问。我唯一的线索是，在控制台中，变量“myList”和“allresults”的显示方式略有不同。第二个可访问，第一个不可访问。

我很困惑，不知道要搜索什么来找到解决方案！我到底做错了什么？谢谢！

【问题讨论】：

“我到底做错了什么？” 您在数组被填充之前访问它。第一行渲染[]这一事实很明显，这意味着在您实际调用console.log时，数组是空的。

标签： javascript arrays json ajax

【解决方案1】：

这是因为 ajax 调用是异步的。因此，当 for 循环完成时，您有一个正在执行的控制台语句，但在那之前，ajax 调用尚未完成，因此您无法正确访问数据。您应该传递一个回调，并且在该回调中您应该有控制台或使用 axios js（基于承诺的 HTTP 库）

【讨论】：

【解决方案2】：

在success 回调中移动console.log(allresults[1].items[0].pageCount); 行。它不起作用，因为 ajax 是异步的，因此您的 console.log 在 ajax 调用完成之前显示。

你的代码应该是这样的：

  var thelink = "https://www.googleapis.com/books/v1/volumes?q=isbn:";
  var allresults = [];

  for (var i = 0; i < bookList.length; i++) {
    $.ajax({
      url: thelink + bookList[i],
      dataType: 'json',
      type: 'get',
      cache: true,
      success: function (data) {
        allresults.push(data);
        // check if it's the last result, if so check all the values inside allresult
      }
    });
  };

【讨论】：