Java script fetch returns 200 but no data

Question

I have a requirement to display all the countries in the world in a drop down. So I found this api end point END POINT LINK. When I copy and paste this end point link in my web browser I got a response with all the data. (countries);

When I try to embed this in project.

getCountries() {
      try {
       
        fetch(`https://restcountries.eu/rest/v1/all`).then(data =>
          console.log(data)
        );
        
      } catch (error) {
        console.log("HERE ERROR COMES", error);
      }
    }

It does go to then block of the fetch method. But gives me the output

There is nothing called data here. Even I get a success respond. Why could this happen? Is this something related to cors errors?

Have you looked at response.body? Have you tried response.json() ?Does the response have the correct data type? Read the specifications of the fetch API to find which response method is appropriate for whatever the restcountries server returned you. What you call data is a Response object. You have to handle that response according to what you are fetching and create the real data object yourself. — Shilly
– Shilly, Commented Sep 13, 2018 at 11:47
I think the problem was unlike axios you can't directly access response data in the fetch method. You have to convert it into json and then access it. I marked answer and it worked for me. =) Thank you guys all. — margherita pizza
– margherita pizza, Commented Sep 14, 2018 at 3:10

protoproto · Accepted Answer · 2018-09-13 12:16:39Z

6

You can use as follow:

let url = 'https://restcountries.eu/rest/v1/all';

fetch(url)
.then(res => res.json())
.then((data) => {
  console.log(data);
})
.catch(err => { throw err });

answered Sep 13, 2018 at 12:16

protoproto

2,0991 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dimitri Kopriwa Over a year ago

is it necessary to throw in catch ? It will be wrapped into Promise.reject(err)

protoproto Over a year ago

Oh, I don't know about it. This my code is basic using ...

Omolewa Stephen · Accepted Answer · 2018-09-13 12:19:10Z

1

This works for me

function getCountries(){
  fetch("https://api.printful.com/countries ")
  .then((resp) => resp.json()) // Transform the data into json
  .then(function(data) {
     let countries = data.result;
     return countries.map(function(country){
        console.log(country.name);
        //Create your list here
     });
    });
}

answered Sep 13, 2018 at 12:19

Omolewa Stephen

4213 silver badges19 bronze badges

Comments

doublethug · Accepted Answer · 2018-09-13 12:07:56Z

-1

responce.type 'cors' probably means Cross Origin Request - and it's blocking it - try to find another api

answered Sep 13, 2018 at 12:07

doublethug

1627 bronze badges

Collectives™ on Stack Overflow

Java script fetch returns 200 but no data

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related