php - 结果在 MySQL 前端给出 undefined

Question

我有以下API:api_get.products.php，它应该为我提供数据库中的所有产品。

当在前端并且我解析结果时，我尝试访问数组对象的关键属性 一一，它为我提供了所有属性的未定义。

我想补充一点，当数据来自文本文件时，相同的解决方案工作得很好。那么，当数据来自 MySQL 时，可能有一种不同的方式来访问它吗？

$sjResponse 的 echo，但是 echo 是正确的。

[{"productCode":"200","productName":"B","productDescription":null,"quantityInStock":"198","buyPrice":"2.00","image": "img/product-image.1.png"},{"productCode":"1000","productName":"A","productDescription":null,"quantityInStock":"233","buyPrice":"1.00 ","image":"img/product-image.2.png"}]

怎么了？

<?php 

    try {

            // connect to the database
            require 'connect.php';
            // create a query
            $query = $conn->prepare("SELECT * FROM products");
            // run the query
            $bResult = $query->execute(); // result of this will return true or false
            $sajResult = json_encode( $query->fetchAll(PDO::FETCH_ASSOC) ); //fetch the result and turn it into a string
            //echo $sajResult;
            $sjResponse = $bResult ?  $sajResult : '{"status":"error"}'; // means if the query is true or false
            echo $sjResponse; 


    } catch (Exception $e) {

            echo "ERROR";

    }

?>

这是 ajax，一切都应该没问题，我只是解析响应。

function getajProductData() {

      var request = new XMLHttpRequest();
      request.onreadystatechange = function() {
          if ( this.readyState == 4 && this.status == 200 ) {

              ajProductDataFromServer = JSON.parse( this.responseText );
              console.log( "Response:" + ajProductDataFromServer );

              if ( sessionStorage.getItem('role') === "admin" ) { 
                  //console.log( "PRODUCTS ARE EDITABLE" );
                  showProductAdmin();

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

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

          }
      }

      request.open( "GET", "api_get_products.php", true );
      request.send();

  }

这里是我尝试逐一访问数组对象属性的地方。在数据来自文本文件之前，这也工作正常。

/ 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

// 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].productName + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].buyPrice + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantityInStock + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].productCode + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

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

  }