How to get JSON data from fetch (response-native)

Question

I am writing a small application for the iPhone using the native reaction. I am trying to get JSON data from a website using fetch. As in the example:

function status(response) { if (response.status >= 200 && response.status < 300) { return response } throw new Error(response.statusText) } function json(response) { return response.json() } fetch('/users', { method: 'post', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Hubot', login: 'hubot', }) }).then(status) .then(json) .then(function(json) { console.log('request succeeded with json response', json) }).catch(function(error) { console.log('request failed', error) }) 

Everything works fine, but I need to use this data later. When I try to assign it to some variable in a json function, I get a "Request error" and after that I get the data (correctly). What is the best practice to get this data and have it in some variable to use it later?

Answer 1

You can create a variable in the component constructor:

 constructor(props) { super(props); this.state = { jsonData: '' } } 

Then you update this variable when you need:

  .then((responseData) => { this.setState({ jsonData: responseData }); }) 

Answer 2

I did it like that. I displayed the answer on the console. You can store response data in your state variable or in local storage as you wish.

  doSignUp() { console.log("inside post api"); fetch('your API URL', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ password: this.state.password, email:this.state.email, name: this.state.firstname, last_name :this.state.last_name, mobile:this.state.mobile, ssn:"2222222" }) }).then((response) => response.json()) .then((responseData) => { console.log("inside responsejson"); console.log('response object:',responseData) }).done(); } 

Answer 3

My dear friend it is very simple

First, as you know, each request returns a header and a body

When we use fetch , the default response, which is a header request. If we need a request body , then response.json() enough

 return fetch(url,{ method: 'POST',//GET and ... headers:{ Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ elm: "elm" //is fake }) }) .then((response)=>response.json()) // <------ this line .then((response)=>{ return response ; }); 

And if the body of your request is html dom, just use this response.text()

And if you want to return your title, you do not need to do anything, just add this line .then((response)=>response.json())

Answer 4

In my case, I used sails.js with a local passport, but it is very similar to any other node.js structure to catch these variables that I used to input the function (req, res), where the variables are req.body. In your case, req.body.name will contain “Hubot” and req.body.login will contain “Hubot”. A response will be sent using res.send. check out the node.js documentation for more details.

Answer 5

It works for me

This is the button.

 <Button onPress={this._onPressButton} accessibilityLabel="tap!!!" /> 

This action

  _onPressButton() { return fetch('https://facebook.imtqy.com/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { console.log(responseJson.movies); }) .catch((error) => { console.error(error); }); } 

result

 [14:30:19] Array [ [14:30:19] Object { [14:30:19] "id": "1", [14:30:19] "releaseYear": "1977", [14:30:19] "title": "Star Wars", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "2", [14:30:19] "releaseYear": "1985", [14:30:19] "title": "Back to the Future", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "3", [14:30:19] "releaseYear": "1999", [14:30:19] "title": "The Matrix", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "4", [14:30:19] "releaseYear": "2010", [14:30:19] "title": "Inception", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "5", [14:30:19] "releaseYear": "2014", [14:30:19] "title": "Interstellar", [14:30:19] }, [14:30:19] ] [14:30:19] Array [ [14:30:19] Object { [14:30:19] "id": "1", [14:30:19] "releaseYear": "1977", [14:30:19] "title": "Star Wars", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "2", [14:30:19] "releaseYear": "1985", [14:30:19] "title": "Back to the Future", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "3", [14:30:19] "releaseYear": "1999", [14:30:19] "title": "The Matrix", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "4", [14:30:19] "releaseYear": "2010", [14:30:19] "title": "Inception", [14:30:19] }, [14:30:19] Object { [14:30:19] "id": "5", [14:30:19] "releaseYear": "2014", [14:30:19] "title": "Interstellar", [14:30:19] }, [14:30:19] ]