Question

我有一个包含对象的数组，该对象包含一个包含对象的数组。有点混乱，但这只是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”的显示略有不同。第二个可访问，第一个不可访问。

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

Answer 1

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

Answer 2

在curl --noproxy '*' -I <URL_TO_VERIFY>回调内移动行console.log(allresults[1].items[0].pageCount);。它没有用，因为ajax是异步的，并且因为success在ajax调用完成之前就已显示。

您的代码应类似于：

console.log

控制台显示AJAX的不同阵列描述

2 个答案: