JavaScript passing the result from a function onto another (with promises)

Question

Hi folks and happy Saturday!

Though JavaScript isn't my prime language, I've been learning quite a bit about asynchronous functions and I thought I had understood the whole thing. Well, obviously not!

I have this csv file that is currently on my GitHub repo. Let's call it "csv_file". Its content looks like this:

Ind,Sentence
0,Hello world!
1,How are you?
2,Yeah all good thx
etc..

I'm using d3's built-in .csv() method to fetch the file, and everything is working fine. I have this first function:

const fetchData = (data) => {
    let fetched = [];
    d3.csv(data).then(csv_file => {
        for (let c in csv_file) {
            fetched.push(csv_file[c]["Sentence"]);
            }
     })
     return fetched;
            }

And then this second function:

const parseData = async (data) => {
    let parsed = await fetchData(data);
    console.log(parsed)
    }

When I run parseData(csv_file) I see the array in the console, so all good. However, in my IDE I get this message telling me that the await keyword is of no use there.

The issue is, if I change my parseData() function to:

const parseData = async (data) => {
    let parsed = await fetchData(data);
    for (let p of parsed) {
        console.log(p)
        }
    }

... Norhing shows in the console! :O So basically, console.log(parsed) shows the array, but looping through it shows nothing. I'm suspecting that I haven't completely grasped how to return data from async / await functions.

What am I doing wrong here? I know I could do this loop in the first function, but I want to learn and understand how I can pass the result of the first function (the parsed array) onto the second one, and they loop through it.

I checked a few solutions before posting, like this one, but I'm still struggling.

Thanks for you help!