cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sthurangi
Frequent Visitor

Calling external API in PCF

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". 

 

sthurangi_0-1669896074604.png

 

 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);
                });
            });
        });
    }

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
a33ik
MVP

Hello,

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

View solution in original post

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

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

8 REPLIES 8
a33ik
MVP

Hello,

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

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

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

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

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
sthurangi
Frequent Visitor

Thanks @a33ik and @DianaBirkelbach 

It's working

iwaldman
Helper III
Helper III

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
Frequent Visitor

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

 

 

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. 

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (4,282)