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 component framework

All responses (8)

Answers (2)

iwaldman 159 on at

Like (0)

Report

Re: Calling external API in PCF

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.
sthurangi 26 on at

Like (0)

Report

Re: Calling external API in PCF

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
iwaldman 159 on at

Like (1)

Report
Re: Calling external API in PCF

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> ))} </> ); };
sthurangi 26 on at

Like (0)

Report

Re: Calling external API in PCF

Thanks @a33ik and @DianaBirkelbach
It's working
Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report

Re: Calling external API in PCF

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
sthurangi 26 on at

Like (0)

Report

Re: Calling external API in PCF

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

Like (0)

Report

Re: Calling external API in PCF

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

a33ik 3,304 Most Valuable Professional on at

Like (1)

Report

Re: Calling external API in PCF

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