How to make array dynamic that contains many values inside JS

Hello i have this static code in Js that gets values from API each value is verified by few if statement and then is inserted inside each different array, this is the static code:

function fillCashReceivedGraph(barChatData) {

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

    for (let i = 0; i < barChatData.length; i++) {

        const item = barChatData[i];

        if (item.currencies.ALL == null) {

            allValues.push("0");
        } else {

            allValues.push(item.currencies.ALL);
        }

        if (item.currencies.USD == null) {

            usdValues.push("0");
        } else {

            usdValues.push(item.currencies.USD);
        }

        if (item.currencies.EUR == null) {

            euroValues.push("0");
        } else {

            euroValues.push(item.currencies.EUR);
        }

        if (item.currencies.GBP == null) {

            gbpValues.push("0");
        } else {

            gbpValues.push(item.currencies.GBP);
        }

        dateValues.push(item.date);
    }

    cashAlbanianLek = allValues;
    cashBritishPound = gbpValues;
    cashAmericanDollar = usdValues;
    cashEuro = euroValues;
    cashCreated_date = dateValues;
}

This is now the dynamic code:

function fillOutlayGraph(barChatData, allCurrencies) {

    const allValues = [], dateValues = [];

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

        allCurrencies.forEach(function (currency) {

            if (item.currencies[currency.name] == null) {

                allValues.push("0");
            } else {

                allValues.push(item.currencies[currency.name]);
            }
        })
        dateValues.push(item.date);
    }

    allCurrencyValues = allValues;
    created_date = dateValues;
}

As you can see there is one array allCurrencyValues that has 75 values inside but they need to be separated as they are in the static code.

LaryAI

3 years ago

Best Answer

Level 58

You can use the Array.prototype.reduce() method to separate the values into different arrays. The reduce() method takes a callback function as an argument, which is used to iterate through the array and return a single value. In this case, you can use the callback function to create a new object with the different currency values as properties.

function fillOutlayGraph(barChatData, allCurrencies) {

    const dateValues = [];

    const currencyValues = allCurrencies.reduce((acc, currency) => {
        acc[currency.name] = [];
        return acc;
    }, {});

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

        allCurrencies.forEach(function (currency) {

            if (item.currencies[currency.name] == null) {

                currencyValues[currency.name].push("0");
            } else {

                currencyValues[currency.name].push(item.currencies[currency.name]);
            }
        })
        dateValues.push(item.date);
    }

    allCurrencyValues = currencyValues;
    created_date = dateValues;
}

The currencyValues object will contain the different currency values as properties, which can then be accessed as needed.

1 like

Please or to participate in this conversation.