-1

Inside a React component, I have a function (Triggered once the component is rendered) :

function getGlassesNames () {

    let outputArray:string[] = getGlassesOriginal();
    console.log(outputArray);
    console.log(typeof outputArray);
    console.log(outputArray.length);


}

console.log #1 shows '[]'.(Which, you can open it and notice that it's actually a poblated array with data)

console.log #2 shows 'Object'

but...console.log #3 shows '0'

The inner function, 'getGlassesOriginal', is being called from an utils.tsx which reads:

export function getGlassesOriginal ():string[] {
    let outputArray:string[] = [];


axios
    .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")
    .then((response)=>{

        

        let responseDataJson=response.data.drinks;

        var i=0;
        for (let element in responseDataJson) {
             
            outputArray.push(responseDataJson[element].strGlass.toString());
           
        }
         
       }
            
)


return outputArray;




}

I just don't understand why I can see in console browser the outputArray from getGlassesNames poblated correctly with data (Element[index]=value) , yet once I want to use their values, those are undefined.

Hope you can help me! Thanks in advance!!!

Agustin Moragues
  • 87
  • 1
  • 1
  • 8

1 Answers1

-1

Carry the return of you function inside a then statement of the http request call, which is async and most of the time will be called after the return line of your function as written above. By the time your request has been responded, then is called, your function had already returned for some time.

export async function getGlassesOriginal (): Promise<string[]> {
    return await axios
        .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")
        .then(response => response.json())
        .then(({ drinks }) => drinks.map(item => item.strGlass));
}

Usage:

const result = await getGlassesOriginal();
sçuçu
  • 2,960
  • 2
  • 33
  • 60
  • 1
    This code will fail because the function does not return anything, but is defined as returning an array of strings. – Heretic Monkey Mar 21 '21 at 22:02
  • I haven't authored the function, it is from the question. The edit I have made is for showing the correct usage for waiting for an async process. – sçuçu Mar 21 '21 at 22:47
  • And that is not what is asked here. The thing that the person needs to understand is to use of async processes and how they behave, not how one should return the correct type from a TypeScript function. – sçuçu Mar 22 '21 at 01:59
  • But in your [previous revision](https://stackoverflow.com/revisions/66737980/2) you did not include the `return` keyword before `axios`, so it was not returning anything from the `getGlassesOriginal` function. Now that you've edited your answer, it will not fail. It still is an answer on a closed question, so the OP likely won't be coming back to reward you; the duplicate question shows how to do exactly what your answer now, after editing, does. – Heretic Monkey Mar 22 '21 at 11:37
  • Yes you right. But it seems unfair the downvoters down vote is not versioned as well like an answer can be done so :). Anyways, teh code in the original post would not work even I got it right for the first time and it would throw a TypeError since it was retrieving a prop from an undefiend prop, I have checked the server response. – sçuçu Mar 22 '21 at 14:57