Unexpected Out of Scope for Global Initialized Variable using Push() Case

Question

I wrote 2 functions that will help me populate listProducts[], I will use listProducts[] as JSON Array structure. I use push() function to add an object to listProducts[] which initialized by rawInputProduct object variable inside populateInventory() function. I add console.log() to check the [id] object of first and the second index of listProducts[], INSIDE, listProducts[]. Nothing's wrong, it returned expected [id] object populated from php JSON. Now the fun part, it's strange that I can't access listProducts[] outside of populateInventory() (I can't access it too inside fetchProductFromDatabase()).

//GLOBAL PARAM
let listProducts = [];

let searchResults = [];
//GLOBAL PARAM

//INIT
fetchProductFromDatabase();

//HELPER FUNC

function fetchProductFromDatabase(){

    var xhr = new XMLHttpRequest();

    xhr.open("GET", "./assets/php/inventoryRetrieve.php", true);

    xhr.responseType = "json";

    xhr.send();

    xhr.onload = function() {
        if (xhr.status === 200) {

        let rawItem = xhr.response;
        
        populateInventory(rawItem);
        
        } else {
        
            console.error("An error occurred while loading the data.");

        }
        
    };
    
}

function populateInventory(rawItem){
    
    if (rawItem.length > 0){
        
        for (let i = 0; i < rawItem.length; i++){
            
            let idProduct = parseInt(rawItem[i].dbIdProduct);
            let priceProduct = parseInt(rawItem[i].dbPriceProduct);
            let sumProduct = parseInt(rawItem[i].dbSumProduct);
            
            let rawInputProduct = {"id": idProduct, "name": rawItem[i].nameProduct, "category": rawItem[i].categoryProduct, "price": priceProduct, "count": sumProduct};
            
            listProducts.push(rawInputProduct);
            
        }
    }
    console.log("INSIDE populateInventory() listProducts[0].id = " + listProducts[0].id);
    console.log("INSIDE populateInventory() listProducts[1].id = " + listProducts[1].id);
}

//CHECKING listProducts[]
console.log("OUTSIDE populateInventory() or fetchProductFromDatabase() listProducts[0].id = " + listProducts[0].id);
console.log("OUTSIDE populateInventory() or fetchProductFromDatabase() listProducts[1].id = " + listProducts[1].id);

This is the images from chrome dev Console, which shown error that caused by calling listProducts[] OUTSIDE of populateInventory().Error as text, it returns :

Uncaught TypeError: Cannot read properties of undefined (reading 'id')

line error console error

I want to know what's causing this to happen and how can I prevent such error in the future.

So I tried to just call listProducts without using index and objects from array structure using :

//it's outside of 2 functions
console.log(listProducts);

it returns :

[]
  0: {id: 4006381333672, name: undefined, category: undefined, price: 1000, count: 10}
  1: {id: 4970129726517, name: undefined, category: undefined, price: 2000, count: 10}

Even if one of the object is undefined, it should not affect the array itself! However, I can't really access listProducts[index-n].[name_of_object] outside populateInventory() function. I need to access object of index-n from listProducts[] array. Thank you for your time to read this question.

Regards,

Karolny Morpov.

Unexpected Out of Scope for Global Initialized Variable using Push() Case

0 Answers0