select data by clicking buttons, then combine associated CSVs into one array

I’m creating an interface where a user can click on buttons that have the names of CSVs in order to see the combined data they select charted.

I’ve set it up so that each button click adds the name of a CSV to an array (called chosenData). Then I’m using a for loop to cycle through the chosenData array, grab the data from github, and push all of the data into another array called allData.

However, the data doesn’t combine correctly. I’ve been pulling my hair out over this problem for hours and haven’t been able to resolve it, so any help would be greatly appreciated!

Code below. Here’s also a jsfiddle

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//"></script>
    <script src=""></script>
    <script src=""></script>

    <title>combine CSVs</title>

    <button id="arr1" class="button">arr1</button>
    <button id="arr2" class="button">arr2</button>
    <button id="arr3" class="button">arr3</button>
    <button id="arr4" class="button">arr4</button>
    <button id="arr5" class="button">arr5</button>

                var parseTime = d3.timeParse("%Y-%m")

        let chosenData = []
        let allData = []

        $('.button').on('click', d => {
            let data =
            console.log('chosenData', chosenData)

        function obtainData(chosenData) {
            for (i = 0; i < chosenData.length; i++) {
                let arrayName = chosenData[i]
                let dailyData = axios.get("" + chosenData[i] + ".csv")
                    .then(content => {
                        let single =
                        let singleCSV = d3.csvParse(single)

                        singleCSV.forEach(d => {
                            d.value = +d.value
                            d.interval = +d.interval
                            d.time = +d.time
                            d.code = arrayName
                   = parseTime(;
                        console.log('single data', singleCSV)

            const merge = allData.flat(1);

        function chartData(allData) {
            console.log('all data', allData)
            // create a chart with combined data here




The issue is probably that the fetches are async. You start them in the for loop, but you don’t wait for them before you do the flattening and call chartData.

You could push the promises returned by axios.get in the loop to ann array, then after the loop use Promise.all to wait for all of them before you merge.