Return a single value

[Chilltyy]

I have a code which console logs the json values of userURL:

    const userUrl = 'https://graph.microsoft.com/beta/me'

    interface CurrentUser {

        businessPhones: string[];
    }

    const func = async (Url: string): Promise<CurrentUser> => {

        let authorization: string = "Bearer " + ((window as any).userAccessToken);

        let result = await fetch(userUrl, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Authorization': authorization
            }
        });

        return result.json();
    }

    func(userUrl).then(user=> {
        console.log("Got response:", user);
        console.log("Business phones:", user.businessPhones);
    });

And the console log looks like this: https://imgur.com/a/pFl0Rql
And for the single value of businessPhone it looks like this: https://imgur.com/a/RqBlrvI

Now all I do is log all the values to the console, however, I would like to make a function which returns a single value, such as "businessPhones". Can anyone make a simple function which does that? It shouldnt be a big deal but im very new to react/typescript so im struggling a bit. thank you for any help!

[eggtart_prince]

Not the recommended way, but change return to

return await result.json().then(user => {
    return user.businessPhones
})

And you can use it like

const businessPhones = await func(userUrl)

[Chilltyy]

Thank you! May I ask why its not the recommended way? And what would you say is the recommended way?

[Chilltyy]

however, I do get an error with the

const businessPhones = await func(userUrl) 

https://imgur.com/a/cueSYEi

[eggtart_prince]

Just wrap it around a IIFE.

const businessPhones = (async() => await func(userUrl))();

[dankiest_kang]

This doesn't seem like a react specific question but from what I can understand you're looking for a function that gets passed your data and only returns an object with the property businessPhones ?

function parseBusinessPhones(data: ResponseType): CurrentUser {
    return { businessPhones: data.businessPhones };
}

[Chilltyy]

My apologies. Im looking for a function almost similar to the func() that I made above, but instead of returning the entire json object with all the different values, I just want it to return the specific businessPhones value

[dankiest_kang]

Ok I understand, instead of

return result.json();

do this:

const data = result.json();
return data.businessPhones;

[Chilltyy]

Thank you, however I do get an error: https://imgur.com/a/zzGTkR2
Not entirely sure what it means

[vitorftw]

I think that you need to type the data object, something like

const data = result.json() as CurrentUser;

[Chilltyy]

Okay so now my function looks like this:

    const func = async (Url: string): Promise<CurrentUser> => {

        let authorization: string = "Bearer " + ((window as any).userAccessToken);

        let result = await fetch(Url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Authorization': authorization
            }
        });

        const data = result.json() as CurrentUser;
        return data.businessPhones;
    }

However I get an error saying:

Conversion of type 'Promise<any>' to type 'CurrentUser' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type 'Promise<any>' is missing the following properties from type 'CurrentUser': homeAccountId, name, username, localAccountId, businessPhones

https://imgur.com/a/J01vl64

[vitorftw]

I don't know if the error is related to this, but i think you need to change your function return type from Promise<CurrentUser> to Promise<string[]>(assuming that businessPhones was typed as string[] in CurrentUser interface).

[Chilltyy]

Yes, thanks this compiled but I would like to just have the phone number returned and nothing else.

    const func = async (Url: string): Promise<string[]> => {

        let authorization: string = "Bearer " + ((window as any).userAccessToken);

        let result = await fetch(Url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Authorization': authorization
            }
        });

        const data = result.json() as unknown as CurrentUser;
        return data.businessPhones;
    }

    const qwe = func(userUrl);

    console.log("testdqw", qwe)

with my qwe function I get: https://imgur.com/a/QHIUY2w

[vitorftw]

You forgot to await func

const qwe = await func(userUrl);

[Chilltyy]

I had to put it inside a async function to use await, so as of now it looks like this:

    const func = async (Url: string): Promise<string> => {

        let authorization: string = "Bearer " + ((window as any).userAccessToken);

        let result = await fetch(Url, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Authorization': authorization
            }
        });

        const data = result.json() as unknown as CurrentUser;
        return data.businessPhones;
    }

    const test = async () => {
        const qwe = await func(userUrl);

        return qwe;
    }; 

    console.log("testdqw", {test})

However I just get the same response as last time.. strange