React-Native JSON fetch from URL

Question

I hope I could find some help to the issue.

I'm using React Native and try to get some data from an API called Feiertage-API (https://feiertage-api.de/), that basically returns (should return) the official holidays in Germany.

Trying to use fetch in react native, returns:

Response {
   "_bodyBlob": Blob {
     "_data": Object {
       "blobId": "49C4AD4B-4648-44DB-AED7-7654EB78EF7A",
       "name": "api",
       "offset": 0,
       "size": 487,
       "type": "application/json",
     },
   },
   "_bodyInit": Blob {
     "_data": Object {
       "blobId": "49C4AD4B-4648-44DB-AED7-7654EB78EF7A",
       "name": "api",
       "offset": 0,
       "size": 487,
       "type": "application/json",
     },
   },
   "headers": Headers {
     "map": Object {
       "access-control-allow-origin": Array [
         "*",
       ],
       "content-type": Array [
         "application/json",
       ],
       "date": Array [
         "Tue, 31 Jul 2018 07:17:51 GMT",
       ],
       "server": Array [
         "nginx",
       ],
       "x-powered-by": Array [
         "PHP/7.0.31, PleskLin, PleskLin",
       ],
     },
   },
   "ok": true,
   "status": 200,
   "statusText": undefined,
   "type": "default",
   "url": "https://feiertage-api.de/api/?jahr=2019&nur_land=hb",
}

My fetch call looks as follows:

fetch('https://feiertage-api.de/api/?jahr=2019&nur_land=hb')
                .then(response => console.log(response) )
                .catch(error => console.log(error));

GET-Parameters are: - jahr=2019 (for year, I think that's obvious) - nur_land=hb (specifying what state by short form)

The possibility is given to get JSONP by adding the get-parameter 'callback=mycallbackname'

If trying to show the data with: console.log(response.json())

the result is:

 Promise {
      "_40": 0,
      "_55": null,
      "_65": 0,
      "_72": null,
   }

What I'm expecting to see is exactly the data which is shown here -> https://feiertage-api.de/api/?jahr=2019&nur_land=hb

Would like to know how to extract the data out of the Response{....}.

Kaarel Allemann · Accepted Answer · 2018-07-31 07:59:35Z

9

You need to call .json() method on that response.

fetch('https://feiertage-api.de/api/?jahr=2019&nur_land=hb')
            .then(response => response.json() )
            .then(data => console.log(data) )
            .catch(error => console.log(error));

answered Jul 31, 2018 at 7:59

Kaarel Allemann

3885 silver badges11 bronze badges

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

4 Comments

Sercan Samet Savran Over a year ago

What the helll... I'd saw this on another thread here ain't had success though. Now copy&pasted your solution and everything works. Thank you so much, marked this as accepted answer.

Kaarel Allemann Over a year ago

It is important to note that response.json() returns a promise so you either have to await it or wrap it in a .then()

Sercan Samet Savran Over a year ago

So it's asynchronus and the second .then command is called once the first one is done getting all the data? Is that correct?

Harry B Over a year ago

Correct. The .catch() will only be called if any promise fails.

Collectives™ on Stack Overflow

React-Native JSON fetch from URL

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related