For loop in Javascript is giving me the last value only

Hello i am making a chart with ChartJS and for the values i am using an API i made using laravel. The API works good but the graph shows me only the last value not all. This is the JS code:

var albanianLek = [], americanDollar = [], euro = [], britishPound = [], created_date = []

async function dummyChart() {

    await getData()

    const ctx = document.getElementById('myChart').getContext('2d');

    const chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: created_date,
            datasets: [{
                label: 'ALL',
                borderColor: 'rgb(255, 0, 0)',
                data: albanianLek
            },
                {
                    label: 'GBP',
                    borderColor: 'rgb(0, 153, 153)',
                    data: britishPound
                },

                {
                    label: 'USD',
                    borderColor: 'rgb(0, 153, 0)',
                    data: americanDollar
                },

                {
                    label: 'EUR',
                    borderColor: 'rgb(0, 0, 255)',
                    data: euro
                },

            ]
        },

        // Configuration options go here
        options: {
            tooltips: {
                mode: 'index'
            }
        }
    })}

dummyChart()


//Fetch Data from API

async function getData() {
    const apiUrl = "http://127.0.0.1:8000/api/outlay";

    const response = await fetch(apiUrl)

    const barChatData = await response.json()

    var count = 0;

    for (let x in barChatData) {
        count +=  barChatData[x].length;
    }

    for(var i=0; i<count; i++) {

        const ALL = barChatData[0][i].map((item) => {
            return item.currencies.ALL;
        })

        const USD = barChatData[0][i].map((item) => {
            return item.currencies.USD;
        })

        const EUR = barChatData[0][i].map((item) => {
            return item.currencies.EUR;
        })

        const GBP = barChatData[0][i].map((item) => {
            return item.currencies.GBP;
        })

        const date = barChatData[0][i].map((item) => {
            return item.date;
        })  //MADE AN EDIT THE VALUES ARE INSIDE THE LOOP
    albanianLek = ALL
    britishPound = GBP
    americanDollar = USD
    euro = EUR
    created_date = date
			}
}

And this is the response the API gives me:

[ [ [ { "currencies": { "ALL": 300, "USD": 250 }, "date": "21-Feb-2023" } ], [ { "currencies": { "ALL": 130, "USD": 200 }, "date": "22-Feb-2023" } ], [ { "currencies": { "USD": 200 }, "date": "23-Feb-2023" } ], [ { "currencies": { "ALL": 1000, "EUR": 2000, "GBP": 500 }, "date": "24-Feb-2023" } ] ] ]

The graphic shows me only the last value which is:

{ "currencies": { "ALL": 1000, "EUR": 2000, "GBP": 500 }, "date": "24-Feb-2023" }

I used console.log(barChatData); the values come the problem is when i fetch them one by one using the i from the for loop

soufyaneyassin

3 years ago

Level 4

The issue with your code is that you are overwriting the variables ALL, USD, EUR, GBP, and date in each iteration of the for loop in the getData function. As a result, when you assign them to the corresponding variables outside the loop, you only get the values from the last iteration.

1 like

devkon98

3 years ago

Level 1

@soufyaneyassin so how should i avoid doing this problem?

soufyaneyassin

3 years ago

Best Answer

Level 4

@devkon98 try to define the variables outside the loop, and push the values to their respective arrays in each iteration something like this:

 const allValues = [], usdValues = [], eurValues = [], gbpValues = [], dateValues = [];

  for (let i = 0; i < barChatData[0].length; i++) {
        for (let j = 0; j < barChatData[0][i].length; j++) {
  const item = barChatData[0][i][j];

  allValues.push(item.currencies.ALL);
  usdValues.push(item.currencies.USD);
  eurValues.push(item.currencies.EUR);
  gbpValues.push(item.currencies.GBP);
  dateValues.push(item.date);
}
}
   albanianLek = allValues;
 britishPound = gbpValues;
 americanDollar = usdValues;
   euro = eurValues;
   created_date = dateValues;

1 like

devkon98

3 years ago

Level 1

@soufyaneyassin thank you this worked!

1 like

Please or to participate in this conversation.