Codestructure in async javascript

I have a simple program that reads a css file (which is available on GitHub pages) and parse the css to an array so I can put at in a list.

I have an dictionary with words, like a vocabulary list which shows me the translation and I can also search for words.

Everything works fine so far but I am really new and this is my first project and I want some advise about my codestructure.

At the moment I have to fetch the csv file (which never changes) in different methods with getData. I do this in init dictionary and again in search and show, because I need the dictionary again. Wouldn’t it be better to get the data once and then use it with all functions?

But then I have to write a lot function into another which is not so good practice I think.

I would really appreciate some advise or link or topics/ direction I have to research, because I can’t find an answer about how to structure this well.

I just use html, css and js without any framework or library.

initDictionary();

async function initDictionary(){

        //get data
        const dictionary = await getData();
 
        //fill html list with words
        fillList(dictionary);
           
}



 //show translation and info when click on word
 show = async function (i){
        let dictionary = await getData();
        document.getElementById("word-text").innerHTML = dictionary[i].Wort;
        document.getElementById("info").innerHTML = dictionary[i].Notizen;
}


  //search stuff
  search = async function() {
        let dictionary = await getData();
        let query = document.getElementById('search').value;
        console.log(query);
        if (query == ""){
                return;
        }

        //init found to false
        let found = -1;

        for(let i=0; i< dictionary.length; i++){
                if(query == dictionary[i].Übersetzung){
                        found = i;
                        break;
                }else {
                        document.getElementById("word-text").innerHTML = "word not found";
                        document.getElementById("info").innerHTML ="";
                }
        }

        if ( found >= 0){
                show (found);

              query = document.getElementById('search').value="";

        }
}



//Start search when u press enter
let input = document.getElementById("search");

input.addEventListener("keyup", function(event) {
        console.log(event);
        if (event.key=== "Enter") {
        search();
        }
});


 // get data
async function getData(){
        const csv = await fetch('https://aboutwhite.github.io/data/data.csv');
        let scvText = await csv.text();
        let dictionary = csvToArray(scvText);  
        return dictionary;
}

 // fill html list with words
 function fillList(dictionary){
        for(let i=0; i< dictionary.length; i++){
                document.getElementById('word-list').innerHTML += "<li onclick='show("+i+")'>" + dictionary[i].Übersetzung+"</li>";
        }
}


//parse csv to array
function csvToArray(str){
        let delimiter = ","
        const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
        const rows = str.slice(str.indexOf("\n") + 1).split("\n");
        const arr = rows.map(function (row) {
        const values = row.split(delimiter);
        const el = headers.reduce(function (object, header, index) {
           object[header] = values[index];
          return object;
         }, {});
         return el;
        });
       return arr;
}