CODEWITHSUNDEEP
javascriptasynchronous
yytrofimov
yytrofimov

Reputation: 25

How do I wait for the function to complete?

function axiosGetJSON(pathToFile) {
    let shortcuts = [];
    axios.get(pathToFile).then((response) => {
        for (i of response.data["shortcuts"]) {
            shortcuts.push(i);
            console.log("OUT: ",shortcuts.length)
            console.log(i);
        }
    });
    console.log("OUT_RESULT: ",shortcuts.length)
    return shortcuts;
}

function createShortcutsTable(shortcuts, requiredData) {
    let shortcutsTable = document.createElement("table");
    let labelString = document.createElement("tr");
    for (label of requiredData) {
        let labelCell = document.createElement("th");
        labelCell.innerHTML = label;
        labelString.appendChild(labelCell);
    }
    shortcutsTable.appendChild(labelString);
    for (shortcut of shortcuts) {
        let tableString = document.createElement("tr");
        for (label of requiredData) {
            let stringCell = document.createElement("th");
            stringCell.innerHTML += shortcut[label];
            tableString.appendChild(stringCell);
        }
        shortcutsTable.append(tableString);
    }
    document.body.append(shortcutsTable);
}
createShortcutsTable(axiosGetJSON('json/shortcuts.json'),['name','url'])

json/shortcuts.json file is:

{
    "shortcuts": [
    { 
        "id":1,
        "name": "123", 
        "url": "123", 
        "img": "123" 
    },
    { 
        "id":2,
        "name": "123", 
        "url": "123", 
        "img": "/img/prakticum-logo.png" 
    }
  ]
}

I've tried async and await as well as passing one of the functions as a callback. Nothing succeeded:( I think function works bad because of asynchrony. I just started learning of JS, so i am beginner and kindly ask for help! Thanks!

Upvotes: 1

Views: 58

Answers (1)

Doan Van Thang
Doan Van Thang

Reputation: 997

Because axios already have a callback function, so you only need to call createShortcutsTable(shortcuts ,['name','url']) after iterate and call function axiosGetJSON('json/shortcuts.json'); alone

        function axiosGetJSON(pathToFile) {
            let shortcuts = [];
            axios.get(pathToFile).then((response) => {
                for (i of response.data["shortcuts"]) {
                    shortcuts.push(i);
                    console.log("OUT: ", shortcuts.length)
                    console.log(i);
                }
                createShortcutsTable(shortcuts, ['name', 'url']);
            });
        }

        axiosGetJSON('json/shortcuts.json');

If you want to use async/await (I don't recommend it because don't need to). You have to turn axiosGetJSON function into an async function, which will return a promise to handle by .then(function)

        async function axiosGetJSON(pathToFile) {
            let shortcuts = [];
            let response = await axios.get(pathToFile);
            for (i of response.data["shortcuts"]) {
                shortcuts.push(i);
                console.log("OUT: ", shortcuts.length)
                console.log(i);
            }
            console.log("OUT_RESULT: ", shortcuts.length)
            return shortcuts;
        }

        axiosGetJSON('json/shortcuts.json').then(function (result) {
            createShortcutsTable(result, ['name', 'url']);
        });

Upvotes: 1

Related Questions