Calling external API in PCF

(0) Share

Report

Posted on by sthurangi

Hello All,

I am trying to consume/fetch the data from external web api into PCF component. I am getting below error

"https.get is not a function".

private callHttps(url: string😞 Promise<any> {

const https = require('https');

return new Promise<string>(resolve => {

https.get(url, (res: any) => {

res.setEncoding("utf8");

let body = "";

res.on("data", (data: any) => {

body += data;

});

res.on("end", () => {

let respBody: any = JSON.parse(body);

resolve(respBody);

});

}

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (8)

Answers (2)

Verified answer

a33ik 3,306 Most Valuable Professional on at

Like (1)

Report

Hello,
I have never used this https package. Just a question - why regular fetch is not an option?

Was this reply helpful? Yes No
sthurangi 26 on at

Like (0)

Report

Yes, it is an option tried using fetch even though it is showing "https.fetch" is not a function.

Was this reply helpful? Yes No
sthurangi 26 on at

Like (0)

Report

Yes, it is an option tried using fetch even though it is showing "https.fetch" is not a function.

Was this reply helpful? Yes No
Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report

Hi @sthurangi ,

I think @a33ik was recommending "fetch()", not http.fetch.

Here are some docs: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Was this reply helpful? Yes No
sthurangi 26 on at

Like (0)

Report

Thanks @a33ik and @DianaBirkelbach
It's working

Was this reply helpful? Yes No
iwaldman 159 on at

Like (1)

Report
I couldn't help myself 😀

import * as React from 'react'; import { Text } from '@fluentui/react/lib/Text'; import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; const URL = 'https://pokeapi.co/api/v2/pokemon'; interface Pokemons { count: number; next: string; previous?: any; results: { name: string; url: string; }[]; } // Fetch a few Pokemons const getPokemons = async (): Promise<Pokemons> => { const response = await fetch(`${URL}?limit=20`); return await response.json(); }; export const PokemonList: React.FunctionComponent = () => { const [loading, setLoading] = React.useState(true); const [pokemons, setPokemons] = React.useState<Pokemons | null>(); // Fetch a few Pokemons React.useEffect(() => { getPokemons().then((data) => { setPokemons(data); setLoading(false); }); }, []); if (loading) { return <Spinner size={SpinnerSize.large} label="Loading Pokemons..." />; } return ( <> {pokemons?.results.map((pokemon) => ( <Text key={pokemon.name} variant="xLarge" style={{ color: 'purple' }} block> {pokemon.name} </Text> ))} </> ); };

Was this reply helpful? Yes No
sthurangi 26 on at

Like (0)

Report

Thanks @iwaldman
Got the response in the form of an array, would like to display the response to details list in pcf, how can I achieve this. without using out-of-box grid/datasets
Any help will be appreciated

Was this reply helpful? Yes No
iwaldman 159 on at

Like (0)

Report

You could try using the Fluent UI DetailsList react control.

See https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic for more information.

Was this reply helpful? Yes No