Proto shows array, typeof show object, when calling it, shows undefined

Question

I have a type that was returned via axios

that looks like this

The proto shows Array, and the typeof shows Object, when I call it via

console.log(allOrderDetails[0])

It returns undefined, how to go around this?

I've tried to loop to each of it by

allOrderDetails.map((item)=> {console.log(item)})

It is not logging a single item, I've also tried logging it by treating it as object

Object.values(allOrderDetails).forEach(value=>{
   console.log(value);
});

Still, is not logging a single item.

I am trying to access the product_id that in theory, supposed to be returned by allOrderDetails[0].product_id, however, allOrderDetails[0] return undefined.

My input obtained is as like this

let allOrderDetails = []
const updateOrderDetails = (values) => {
    allOrderDetails = [];
    let config = {
        method: "get",
        url: "http://localhost:3000/v1/orderdetails/b612z512h1x1",
        headers: {
            Authorization: "Bearer " + token.access.token,
        },
    };

    axios(config)
    .then((response) => {
        allOrderDetails.push(response.data);
    })
};

const printItemName = () => {
    console.log(allOrderDetails);
    console.log(allOrderDetails[0]);
};

return (
    <div>
        {updateOrderDetails()}
        <div style={{ fontFamily: "Segoe UI" }}>{printItemName()}</div>
    </div>
)

Can you give some more info on issue? As of now, I can see the little blue `i` beside your array which means evaluated just now. So maybe at the execution time of other console logs, there was nothing in the array. — Sangam Rajpara, Feb 01 '21 at 16:00
I guess this issue is happening while you are logging state variables. — Sangam Rajpara, Feb 01 '21 at 16:02
This might actually be an issue with your debugging, Chrome has some [oddities around lazy evaluation of arrays](https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log) in the console. Try stringifying the array before you log it and see what arrives: `console.log(JSON.stringify(allOrderDetails))` It might be that React is modifying the array between the time is is logged and the time it is evaluated to display the content. — DBS, Feb 01 '21 at 16:30

score 0 · Accepted Answer · answered Feb 02 '21 at 06:51

I have found out that why is my code not working,

Because my axios.then function, my code is running parallel and as of what I found, the after-evalute for object will have some problem,

How I solved is by adding async, then add the await function.

let allOrderDetails = []
const async updateOrderDetails = (values) => {
    allOrderDetails = [];
    let config = {
        method: "get",
        url: "http://localhost:3000/v1/orderdetails/b612z512h1x1",
        headers: {
            Authorization: "Bearer " + token.access.token,
        },
    };

    try {
        let response = await axios(config);
        allOrderDetails.push(response.data);
        printItemName();
    } catch (error) {
        console.log(error);
    }
};

const printItemName = () => {
    console.log(allOrderDetails);
    console.log(allOrderDetails[0]);
};

return (
    <div>
        {updateOrderDetails()}
    </div>
)

It is working for me, but for the reason behind I am yet to fully understand why, perhaps someone can enlighten me?

Proto shows array, typeof show object, when calling it, shows undefined

1 Answers1