JSON attribute only reachable in developer console?

API Discussion
1

thank you all for your time in reading this. I have been pulling out my hair trying to figure out why this does not work.

I am trying to reach a JSON attribute, but for some reason it only works in the developer console?

ID = 3039; 
fetch(`https://us.api.blizzard.com/data/wow/item/${ID}?namespace=static-us&locale=en_US&access_token=${oAuthToken}`)
            .then(response => response.json())
            .then(data => responseFromFetch = data)
            .then(newData => console.log(newData.preview_item.stats[0].display.display_string))

This, as expected returns the attribute I am looking for, “+16 Agility”

However, when I try to access this attribute in the following context, it is giving me the error: “Cannot read property ‘0’ of undefined”.

function getToolTipID() {
        let ID;
        let ID2;
        ID = (event.currentTarget.children[5].innerText.replace("ID: ", ""));
        ID2 = (event.currentTarget);
            console.log(ID);
            fetch(`https://us.api.blizzard.com/data/wow/item/${ID}?namespace=static-us&locale=en_US&access_token=${oAuthToken}`)
            .then(response => response.json())
            .then((user) => {
                console.log(user.inventory_type);
                let lineContent;
                let statsArray; 
                try {
                    statsArray = user.preview_item.stats[0].display.display_string
                    console.log(statsArray)
                } catch (error) {
                    console.log(error)
                }
                console.table(statsArray)
                const lines = [
                    `${user.name}`,
                    `${user.preview_item.level.value}`,
                   /* `${user.preview_item.binding.name}`, */
                    `${user.inventory_type.name}`,
                    `${user.item_subclass.name}`,
                    `${user.preview_item.weapon.damage.display_string}`,
                    `${user.preview_item.weapon.attack_speed.display_string}`,
                    `${user.preview_item.weapon.dps.display_string}`,
                /* ACCESSING VALUE HERE */ `${user.preview_item.stats[0].display.display_string}`, */
                    `${user.preview_item.durability.display_string}`,
                    `${user.required_level}`,
                    `${user.sell_price}`
                ] 
                lineContent = user.inventory_type.name;
                let node = document.createElement('tr');
                node.innerHTML = lines;
                
                document.getElementById("toolTipDisplay").appendChild(node);
            }); 

    }

I also had to comment out the reference to preview_item.binding.name because it also said it’s undefined.

Is there something wrong with a dependency?

One reason that this is so weird, is that the the path I used on line 15, I got from the json response in the console, I right clicked it to get the property path.

On a side note, i’m also not sure how I can store the display string of each stat, since each item has a different number of stats in this array.

2

It is really hard to tell without having access to the whole code, but it seems one of the items you are trying to create the tooltip has no stats. It is possible for some items like shirts and tabards that have no stats.

No.

You must iterate over each available stat. You can use a for loop or one of the built in array functions .forEach or .map.

Try replacing this:

try {
  statsArray = user.preview_item.stats[0].display.display_string
  console.log(statsArray)
} catch (error) {
  console.log(error)
}

with this:

 let statsArray = user.preview_item.stats.map(stat => stat.display.display_string)