How to assign the return of a Fetch function to Javascript variables

Asked

Viewed 13 times

0

Maybe the solution to my problem is extremely trivial, because I do not understand much of Javascript, however I did not find the solution.

I have developed an API and intend to consume it so that you can use your data in a graph. However, the return of the function returns me a promisse. I wonder how I can assign the returned object values to variables within Javascript.

Some solutions I found are with the use of . then! However, I can’t develop the entire graph of then just so I can use the values of the object (this approach would be mistaken for sure).

Code that consumes the API:

async function load() {
    let url = 'http://127.0.0.1:5000/req?esp-id=1&date=04/12';
    let obj = null;
    
    try {
        obj = await (await fetch(url)).json();
    } catch(e) {
        console.log('error');
    }
    
    console.log(obj);
    console.log(obj.id);
    console.log(obj.date_log.substring(0,5));
    console.log(obj.data.spent);
    console.log(obj.data.gain);
    
    return obj
}
let obj = load()

console.log(obj)

Return:

Retorno do código fetch

Chart code:

var ctx = document.getElementsByClassName("bar-chart");
            var charGraph = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
                    datasets: [{
                        label: 'Aquisição',
                        data: [10, 9, 12, 19, 21, 7, 8],
                        backgroundColor: [
                            'rgba(84, 151, 90, 0.5)'
                        ],
                        borderColor: [
                            'rgba(84, 151, 90, 1)',
                                                       
                        ],
                        borderWidth: 1
                    },
                    {
                        label: 'Gasto',
                        data: [10, 9, 12, 19, 21, 7, 8],
                        backgroundColor: [                           
                            'rgba(255, 99, 132, 0.5)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)'                       
                        ],
                        borderWidth: 1
                    },
                {
                    label: 'Previsão',
                        data: [10, 9, 12, 19, 21, 7, 8],
                        backgroundColor: [
                            'rgba(255, 206, 86, 0.5)'
                        ],
                        borderColor: [
                            'rgba(255, 206, 86, 1)'                            
                        ],
                        borderWidth: 1
                }]
                },
                options: {
                    legend:{
                        display: false,
                        position: 'left'
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

The idea is to assign obj.data.Spent and obj.data. in the different date chart and also use obj.date_log to define the Labels. Hence, both the Labels how much the date of graph code are examples. Any help will be appreciated.

  • 1

    There is no other way. The only "right" way to access the value of a promise is by then (or the await, which is a mere alternative syntax).

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.