I am trying to chain promises in an async function working with fetch API but it does not work

Question

I am building a website which shows you the price of bitcoin in real time using an API .The problem is I am trying to determine if the price is higher or lower so i put the algorithm for this in a third then. This is my code:

async function pageReload() {
    const showPrice = document.getElementById("bitcoin");
    await fetch('********', options)
        .then(response => response.json())
        .then(response => {
            console.log(response);
            let pastValue = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
            showPrice.innerHTML = pastValue;
        })
        .then((response) => {
            let pastValue1 = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
            let current = null;
            if (current > pastValue1) {
                current = pastValue1;
                console.log('e mai mare');
            } else if (current == pastValue1) {
                current = pastValue1;
                console.log("e egal");

            } else if (current < pastValue1) {

                console.log("current este " + current + ' pastValue este' + pastValue)
                current = pastValue1;
                console.log("e mai mic");
                showPrice.style.color = 'red';
            }
        })


    .catch(err => console.error(err));



}

const timer = setInterval(pageReload, 20000);
setInterval();

At first I put the algorithm in the second then but both variables were getting same numbers instead of 'current' getting the number before. This is the error I am getting from browser:

Answer 1

In this part of the code:

.then(response => {
    console.log(response);
    let pastValue = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
    showPrice.innerHTML = pastValue;
})
.then((response) => {
    let pastValue1 = parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
    let current = null;
    if (current > pastValue1) {
        current = pastValue1;
        console.log('e mai mare');
    } else if (current == pastValue1) {
        current = pastValue1;
        console.log("e egal");

    } else if (current < pastValue1) {

        console.log("current este " + current + ' pastValue este' + pastValue)
        current = pastValue1;
        console.log("e mai mic");
        showPrice.style.color = 'red';
    }
})

You have to either return response from the first .then() here in this section of code or you have to just get rid of the second .then() here since it isn't needed as there's no asynchronous operation in this first .then(). Because you aren't doing a return response, then when you try to do this:

parseInt(response["Realtime Currency Exchange Rate"]["8. Bid Price"]

response will be undefined.

In addition, your value of current is ALWAYS reset to null to you then compare pastValue with null which will always give you the same result. I'm guessing that you want current to be retained from one call to the next so you can compare to that. To do that, you have to declare it outside this function so it survives from one call to the next.

It's also substantially simpler to not mix await and .then(). If you're using await, just use it instead of .then() and use try/catch instead of .catch().

Here's what I would suggest:

// declare current here so it is retained from one function call to the next
let current = 0;

async function pageReload() {
    try {
        const showPrice = document.getElementById("bitcoin");
        let response = await fetch('********', options);
        let data = await response.json();
        console.log(data);
        let pastValue = parseInt(data["Realtime Currency Exchange Rate"]["8. Bid Price"], 10);
        showPrice.innerHTML = pastValue;
        if (current > pastValue) {
            console.log('e mai mare');
        } else if (current == pastValue) {
            console.log("e egal");
        } else if (current < pastValue) {
            console.log("current este " + current + ' pastValue este' + pastValue)
            console.log("e mai mic");
            showPrice.style.color = 'red';
        }
        current = pastValue;
    } catch(e) {
        console.log(e);
    }
}

const timer = setInterval(pageReload, 20000);
setInterval();

It also seems like you're missing some logic inside your if/elseif/elseif because all they are doing except for the last one is just doing a console.log(). Don't you want to be doing something to modify the page in those if/else branches?