Fetching JSON and iterating through the values in react-native

Question

I'm new to react native, and I'm trying to simply iterate through a sample json file but am receiving the error undefined is not a function (evaluating 'this.state.results.map')

I have set the state initially to be an object, so not sure why i am receiving this error.

Here is the JS:

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';

var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';

class WPReact extends Component {
  constructor(props) {
    super(props);
    this.state = {results: []};
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          results : { responseData }
        });
      })
      .done();
  }
  render() {
    return this.renderJSON();
  }
  renderJSON() {
    contents = this.state.results.map((item) => {
      <View key={item.movies.title} style={ styles.container }>
        <Text style={styles.title}>
          {item.movies.title}
        </Text>
      </View>
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }
}

var Dimensions = require('Dimensions');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);

EDIT

So i have edited the renderJSON() to and also removed the braces of responseData as you said, as it was already an object:

renderJSON() {

    console.log(this.state.results.description);
    contents = this.state.results.movies.map((item) => {
      <View key={item.title} style={ styles.container }>
        <Text style={styles.title}>
          {item.title}
        </Text>
      </View>
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }

I added a console log to see if i can output some of the data, and i can see the description. The sample JSON i am using is (demo from react):

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "title": "Star Wars", "releaseYear": "1977"},
    { "title": "Back to the Future", "releaseYear": "1985"},
    { "title": "The Matrix", "releaseYear": "1999"},
    { "title": "Inception", "releaseYear": "2010"},
    { "title": "Interstellar", "releaseYear": "2014"}
  ]
}

I can log the description and title. But I am still receiving: ReactNativeJS: undefined is not an object (evaluating 'this.state.results.movies.map')

And if I try logging console.log(this.state.results.movies[0].title) I am receiving undefined is not an object (evaluating 'this.state.results.movies[0]')

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
        this.setState({
          results : responseData
        });
      })
      .done();
  }

console.log(responseData) shows:

03-29 13:49:53.028  3062  4143 I ReactNativeJS: { title: 'The Basics - Networking',
03-29 13:49:53.028  3062  4143 I ReactNativeJS:   description: 'Your app fetched this from a remote endpoint!',
03-29 13:49:53.028  3062  4143 I ReactNativeJS:   movies: 
03-29 13:49:53.028  3062  4143 I ReactNativeJS:    [ { title: 'Star Wars', releaseYear: '1977' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Back to the Future', releaseYear: '1985' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'The Matrix', releaseYear: '1999' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Inception', releaseYear: '2010' },
03-29 13:49:53.028  3062  4143 I ReactNativeJS:      { title: 'Interstellar', releaseYear: '2014' } ] }

console.log(this.state.results.movies);

03-29 14:18:05.483  3062  4726 I ReactNativeJS: undefined
03-29 14:18:05.510  3062  4726 I ReactNativeJS: [ { title: 'Star Wars', releaseYear: '1977' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Back to the Future', releaseYear: '1985' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'The Matrix', releaseYear: '1999' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Inception', releaseYear: '2010' },
03-29 14:18:05.510  3062  4726 I ReactNativeJS:   { title: 'Interstellar', releaseYear: '2014' } ]

what happens when you console.log(this.state.results.movies)? — Pineda
– Pineda, Commented Mar 29, 2017 at 13:08
I've modified my original post to show you, not sure why there is an undefined there? — KT.C
– KT.C, Commented Mar 29, 2017 at 13:20
This occurs even after you use JSON.parse as I suggested in my amended answer? — Pineda
– Pineda, Commented Mar 29, 2017 at 13:23
Ahah you are logging the results before setting them into state! Log them before you call this.renderJSON in your render method — Pineda
– Pineda, Commented Mar 29, 2017 at 13:28
@Pineda putting console.log(this.state.results.movies) in the render method outputs the same as above what i posted, still shows undefined. — KT.C
– KT.C, Commented Mar 29, 2017 at 13:40

Facundo La Rocca · Accepted Answer · 2017-03-29 14:16:24Z

7

I see a couple of things you need to change.

Firstly, you need to bind fetchData method when you are using ES6 doing this this.fetchData = this.fetchData.bind(this); in the constructor (look for other ways to do this).

Secondly, map should be applied to this.state.results.movies due this is the array (following your post). this.state.results is not an array, is an object containing an array.

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View, StyleSheet, TouchableHighlight } from 'react-native';

var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';

class WPReact extends Component {
  constructor(props) {
    super(props);

    this.state = {
      //Lets initialize results with the same struct we expect to receive from the api
      results: {
        title: '',
        description: '',
        movies: []
      }
    };
    //Using ES6 we need to bind methods to access 'this'
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          results: responseData
        });
      })
      .done();
  }

  render() {
    //this.state.results.movies is the array you have to iterate
    contents = this.state.results.movies.map((item) => {
      //We need to return the corresponding mapping for each item too.
      return (
          <View key={item.title} style={ styles.container }>
            <Text style={styles.title}>
              {item.title}
            </Text>
          </View>
        );
     });
    return (
      <View style={styles.container}>
        {contents}
      </View>
    );
  }
}

var Dimensions = require('Dimensions');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => WPReact);

Let me know if its works, I havent tested yet but I will soon.

edited Mar 29, 2017 at 14:16

answered Mar 29, 2017 at 13:21

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

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

11 Comments

Pineda Over a year ago

The fetch is working without the bind. The issue is with the data that it is returning...

Facundo La Rocca Over a year ago

Take a look at my second point. I think he needs to iterate results.movies instead

Pineda Over a year ago

That second point is now moot, given the EDIT to the original question as a result of suggesting this exact point an hour ago :)

Facundo La Rocca Over a year ago

Well, in the constructor, results is being initialized as an array. Why not trying to separate results in movies in one hand and rest of info in the other?

Pineda Over a year ago

Depends on if the results returns one object or many. In the current case it returns a singular object, there is a possibility it was intended to return an array. This is something for the OP to clarify

|

Jérôme · Accepted Answer · 2017-03-29 12:03:55Z

0

React components using ES6 classes don't autobind this to non React methods. In your constructor, add:

this.renderJSON = this.renderJSON.bind(this)

answered Mar 29, 2017 at 12:03

Jérôme

1,0801 gold badge7 silver badges18 bronze badges

1 Comment

Pineda Over a year ago

If what you say is the case, wouldn't this.fetch also fail?

Pineda · Accepted Answer · 2017-03-29 13:03:15Z

0

responseData has to be an array for the Array#map() method to be available as a method on it.

You are setting results to an object containing the value of your responseData:

this.setState({ 
  results : { responseData } // Object literal notation albeit possibly incorrect depending on the value of responseData
});

Remove surrounding braces if you are sure responseData is an array:

this.setState({ 
  results :  JSON.parse(responseData);
  // You'll want to parse your JSON data here too :)
  // If responseData is an array, you'll be able to call .map on it
});

// this.state.results.movies.map should now work
// (given the structure of the expected JSON)

edited Mar 29, 2017 at 13:03

answered Mar 29, 2017 at 12:10

Pineda

7,5933 gold badges34 silver badges47 bronze badges

6 Comments

KT.C Over a year ago

so i have removed the braces, and has got me a little further, but still receive the same map error.

Pineda Over a year ago

Can you update your question to show the value returned in responseData? It could be that the value returned is not an array

Pineda Over a year ago

So this looks like you receive a single object. Are you expecting an array of these objects, or are you trying to map through the titles property?

Pineda Over a year ago

I've amended my answer to include the parsing of the JSON data when setting the results property on state

KT.C Over a year ago

when i add that, i get JSON Parse error: Unexpected identifier "object"

|

Collectives™ on Stack Overflow

Fetching JSON and iterating through the values in react-native

EDIT

3 Answers 3

11 Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

11 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related