JSONP 数组在函数之外未定义

Question

我发现了很多和我类似的问题；但我看到的答案似乎都不适合我。所以这是我的问题。我正在使用 jQuery JSONP 来获取有关某些书籍的大量信息（JSON 是静态的，因此它周围有一个硬编码的函数）。我有这个工作得很好。我的问题是我需要多次引用 JSON 并且它是静态的，我想我需要使用这些值设置一个本地数组。下面是我的代码：

function changeList(cat) {
  getList(cat);
}
var bookArray = new Array();

function parseResponse(jsonData) {
  $('#bookList').empty();
  var items = [];
  var p = '0';
  $.each(jsonData, function(item, i) {
    bookArray[p] = { 'bookId':i.bookId, 'category':i.category, 'publishedDate':i.publishedDate, 'title':i.title, 'description':i.description, 'images':i.images };

    var allImages = i.images;
    if(allImages.length > 1) {
      var imageLoc = allImages.toString().split(",");
    } else {
      var imageLoc = new Array(allImages);
    }
    var theDate = new Date();
    theDate.setTime(i.publishedDate * 1000);
    var year  = theDate.getUTCFullYear(); 
    var month = theDate.getUTCMonth();
    var day = theDate.getUTCDate();
    var d = months[month] + " " + day + ", " + year;

    items.push('<li><a href="/' + i.category + '/' + i.bookId + '/index.html"><img border="0" height="70" width="124" src="' + imageLoc[0] + '"><p>Published: <strong>' + d + '</strong><br /><span class="bookTitle">' + i.title + '</span> ' + i.description + '</p></a></li>');
    p++;
  });

  $('<ul/>', {
    html: items.join('')
  }).appendTo('#bookList');
}

function getList(section) {
  $.getJSON('http://www.otherdomain.com/book_'+ section +'.json?format=jsonp&callback=?', function(data) { });
}

上面代码的 sn-p 所做的是从页面上的某个类别中吐出一个书籍列表。左侧有一个菜单，其中包含类别并触发 changeList() 函数（进而触发其他函数绘制正确的 json 并将它们吐出到页面上）。这部分完美无缺！

这让我想到了我的问题，正如您在 parseResponse() 函数中看到的那样，我正在填充我创建的“bookArray”数组。如果我在函数中引用该数组，我没有问题。但是，如果我尝试在外部引用它（例如 alert(bookArray[0]['title']) 我知道它是未定义的。我做错了什么？我不是最精通技术的人，所以你有对我说小话。感谢您的帮助！

编辑 这是一个 sn-p，可让您了解 JSON 文件的外观：

parseResponse(
[{
        "bookId":"1",
        "category":"A",
        "publishedDate":"1266870137",
        "title":"Title to first story",
        "description":"The first story.",
        "images":["http://www.otherdomian.com/books/fff.jpg","http://www.otherdomian.com/books/aaa.jpg"]
    },{
        "bookId":"2",
        "category":"A",
        "publishedDate":"1366870142",
        "title":"Title to second story",
        "description":"The second story.",
        "images":["http://www.otherdomian.com/books/fff.jpg","http://www.otherdomian.com/books/aaa.jpg"]
    }
])

Answer 1

function getList(section) {
    $.getJSON('http://www.otherdomain.com/book_'+ section +'.json?format=jsonp&callback=?', parseResponse);
}

AJAX 调用是异步的，因此您无法在请求完成之前开始处理数据。这会将parseResponse 设置为回调，这意味着它会在请求完成后被调用。此时您将拥有您的 json。

如果你想访问外部数据，你必须确保在回调完成后进行，这意味着需要进一步使用它的任何其他代码都需要调用 from 你的回调。

var bookArray = []; //use this instead of new Array(). There are security issues with the former (Array can be overridden)

function parseResponse(jsonData) {

   /*
     ... existing code ...
   */

   otherFunctionThatNeedsBookArray(); //alternatively you can set bookArray as a local variable and call otherFunctionThatNeedsBookArray(bookArray);
}

Answer 2

也许因为 p 被定义为字符串p='0'。试试p=0;

Answer 3

这第一点不是你问题的答案，但你的 jQuery.each() 参数我认为是错误的，因为'i'应该是你的索引，'item'应该是值。我可能弄错了，但是您应该能够使用 i 而不是 p 来索引您的数组

Answer 4

我要在黑暗中试一试。您的标题表明您使用的是始终异步的 JSONP ajax 请求。我猜您正在尝试在 JSONP 请求响应之前访问全局变量的内容。在 jQuery 中，从“成功”回调中访问数据是合适的。