React-Native fetch JSON from rest service and store it as an array in state

Question

Hello people on StackoverFlow,

I'm developing a backend (Laravel) and a frontend (React-Native). The problem is on the frontend, where I'm trying to assign the JSON response to the state. But for some reason I can't set the "this.state.data" to be an array as it always turns out to be a string and instead of an object I get one character at a time.

I want to set the data to be an array of all the routes from the API response.

React-Native code: (OBS: URL REMOVED DUE TO SERVER IS IN DEVELOP MODE)

async getData() {
var token =  await AsyncStorage.getItem("token");
this.setState({ "token": token });

fetch('myurl', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    token: this.state.token
  })
}).then((response) => {

    if (response != null) {
      //console.log(response.json());
      console.log(response);

      this.setState({
        //data: response._bodyInit,
        data: JSON.stringify(response._bodyInit),
        loading: false
      });
    }
    return this.state.data;
  })
  .catch((error) => {
    console.error(error);
  });

}

The URL response structure looks like this:

{
    routes: [
      {
        id: '15',
        uuid: '26-10-2018',
        start_address: 'Krogshøj Alle 3',
        end_address: 'Lindevangs Alle 16',
        arrival: '27-10-2018 10:00',
      },
      ...
      ]
 }

If I hardcode the data like this, it works.

this.setState({
  data: 
    [
      {
        id: '15',
        uuid: '26-10-2018',
        start_address: 'Krogshøj Alle 3',
        end_address: 'Lindevangs Alle 16',
        arrival: '27-10-2018 10:00',
      },
    ]
});

This is where I use the data:

return (
  <View style={styles.container}>
    <Toolbar
      isHidden={phase !== 'phase-0'}
      onBackPress={this.onBackPressed}
    />

    <FlatList
      key={item => item.id}
      data={this.state.data}
      dataExtra={{ phase, opacityOfSelectedItem }}
      keyExtractor={item => item.id}
      renderItem={this.renderItem}
    />

  </View>
);

Asaf Aviv · Accepted Answer · 2018-10-27 21:41:46Z

1

fetch('myurl', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    token: this.state.token,
  }),
})
  .then(response => response.json())
  .then((data) => {
    this.setState({
      data: data.routes,
      loading: false,
    });
  })
  .catch((error) => {
    console.error(error);
  });

edited Oct 27, 2018 at 21:41

answered Oct 27, 2018 at 21:31

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

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

3 Comments

Kingfox Over a year ago

Yeah, thanks for pointing that out. But for some reason the response in react-native looks like this: { type: 'default', status: 200, ok: true, statusText: undefined, headers: { map: { 'content-type': 'application/json', date: 'Sat, 27 Oct 2018 21:33:58 GMT', 'content-encoding': 'gzip', 'content-length': '992', vary: 'Accept-Encoding,User-Agent', 'x-powered-by': 'PHP/7.1.23', 'x-ratelimit-limit': '60' } }, url: ' myurl', _bodyInit: '{"routes":[{"id":15,"uuid":"bdc31630-d7db-11e8-b45f-d76be65679f3"...

Kingfox Over a year ago

When im using Postman to call the API it returns as I stated in my question.

Kingfox Over a year ago

Wow, thanks a lot! Guess I need to work some more with react-native to really catch this. But again thanks, you are a life saviour.

Collectives™ on Stack Overflow

React-Native fetch JSON from rest service and store it as an array in state

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related