服务器的数据未定义:参考错误

Question

我有以下代码方案，在那里我从服务器中获取了一些数据，并且我正在根据不同的会话标准显示数据，但是它会使我 Reference error ajProductDataFromServer is not defined 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);
  }
}

Answer 2

在 getProductData中，您将一个称为 ajProductDataFromServer的变量称为参数名称。

使其成为getProductData函数范围中的局部变量。

您永远不会在该功能中使用该变量。

同时：

在showProduct中，您尝试(几次(从称为ajProductDataFromServer的变量中读取数据，但您尚未声明一个。

ajProductDataFromServer唯一存在于不同函数中的变量。

showProduct无法访问getProductData变量，只是因为对showProduct的调用在getProductData中。

您需要明确传递数据。

---

顺便说一句，getProductData被称为两次。一次作为对Ajax的回调，添加事件侦听器后立即。

getProductData();无参数调用它，以便时间ajProductDataFromServer无论如何都是undefined。