Result gives undefined on the front-end in MySQL - php

Question

I have the following API: api_get.products.php, which should gives me all the products from the database.
When on the front-end and I parse the result, and I try to access the array´s object´s key properties one by one, it gives me undefined for all the properties.
I would like to add that same solution worked fine when data came from a text file. So probably when data comes from MySQL there is a different way to access it?
The echo of $sjResponse, however echo´s the right thing.
[{"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"}]
What´s wrong?
<?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";
}
?>
Here is the ajax, where everything should be fine, I just parse the response.
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();
}
And here is where I try to access the array´s object´s properties one by one. This also worked fine before when the data came from a text file.
/ 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">' + '' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '' + '' + '<img src="' + ajProductDataFromServer[i].image + '">' + '' + '<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">' + '' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '' + '' + '<img src="' + ajProductDataFromServer[i].image + '">' + '' + '<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 );
}
}