javascript - 来自服务器的数据未定义: reference error

Question

我有以下代码场景，我从服务器获取一些数据，并根据不同的 session 标准显示数据，但是它给我带来了引用错误 ajProductDataFromServer is not Define in showProduct 。

似乎 showProduct 没有对数据的引用，但我无法弄清楚差距在哪里，请帮助我!在 getAjax 中，我将 ajDataFromServer 传递给回调，在本例中为 getProductData。那么 showProduct 不应该也能够访问该数据吗？

// GLOBAL ARRAY for storing any DATA from the SERVER
var ajDataFromServer = [];

// Main ajax function using callback for getting data from the server
function getAjax(sUrl, callback) {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      ajDataFromServer = JSON.parse(this.responseText);
      callback(ajDataFromServer);
    }
  }

  ajax.open("GET", sUrl, true);
  ajax.send();

}

/************************************************************************/

// INITIALIZE / populate home page with products
document.addEventListener("load", function() {
  getAjax("api_get_products.php", getProductData);
});
getProductData();

/************************************************************************/
// GET ALL PRODUCTS and display them with diffrent features according role
function getProductData(ajProductDataFromServer) {

  if (sSessionRole === "admin") {
    //console.log( "PRODUCTS ARE EDITABLE" );
    showProductAdmin();

  } else if (sSessionRole === "user") {
    //console.log( "PRODUCTS ARE AVAILABLE FOR USER" );
    showProduct();

  } else {
    //console.log( "PRODUCTS AVAILABLE FOR PUBLIC" );
    showProduct();
  }
}

/************************************************************************/

// DISPLAY PRODUCTS for USER / PUBLIC dinamically using a loop and then INSERT into HTML
function showProduct() {
  lblProductList.innerHTML = "";

  for (var i = 0; i < ajProductDataFromServer.length; i++) {

    var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

    lblProductList.insertAdjacentHTML('beforeend', lblProduct);
  }

}

Answer 1

有两个问题。

首先，您在 getAjax() 调用之外调用 getProductData();，因此它会在 AJAX 完成之前运行。您还可以在不带参数的情况下调用它，因此 ajProductDataFromServer 将为 undefined。我不知道为什么你有这个，它可能应该被删除。

其次，showProduct() 尝试使用变量 ajProductDataFromServer，但这是 getProductData() 中的局部变量。您需要将其作为参数传递:

function getProductData(ajProductDataFromServer) {

  if (sSessionRole === "admin") {
    //console.log( "PRODUCTS ARE EDITABLE" );
    showProductAdmin(ajProductDataFromServer);

  } else if (sSessionRole === "user") {
    //console.log( "PRODUCTS ARE AVAILABLE FOR USER" );
    showProduct(ajProductDataFromServer);

  } else {
    //console.log( "PRODUCTS AVAILABLE FOR PUBLIC" );
    showProduct(ajProductDataFromServer);
  }
}

function showProduct(ajProductDataFromServer) {
  lblProductList.innerHTML = "";

  for (var i = 0; i < ajProductDataFromServer.length; i++) {

    var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

    lblProductList.insertAdjacentHTML('beforeend', lblProduct);
  }

}