How to get objects of objects in react native?

Question

My JSON data is

[
  {
    id: 51,
    name: 'Boat Neck Blouse',
    image: {
      id: 669,
      date_created: '2018-08-27T10:05:39',
      date_created_gmt: '2018-08-27T10:05:39',
      date_modified: '2018-08-27T10:05:39',
      date_modified_gmt: '2018-08-27T10:05:39',
      src:
        'https://dreamdesigners.rkhomeappliances.co.in/wp-content/uploads/2018/08/boatneck.jpg',
      title: 'boatneck',
      alt: '',
    },
    menu_order: 0,
  },
];

I can get the name, id, and all but can't get src of image object . What I tried is

state = { data: [] };

fetchData = async () => {
  const response = await fetch('mywebsite.com/json');
  const posts = await response.json();
  this.setState({ data: posts });
};

componentDidMount() {
    this.fetchData();
}

render() {
  return (
    <Container>
      <ScrollView style={{ backgroundColor: '#eeeeee' }}>
        <View>
          <FlatList
            contentContainerStyle={styles.list}
            numColumns={2}
            data={this.state.data}
            keyExtractor={(x, i) => i.toString()}
            renderItem={({ item }) => (
              <TouchableHighlight
                style={{ width: '50%' }}
                underlayColor="white">
                <View style={styles.view}>
                  <Text>{item.image.src}</Text>

                  <Text style={styles.text}>{item.name}</Text>
                </View>
              </TouchableHighlight>
            )}
          />
        </View>
      </ScrollView>
    </Container>
  );
}

I just tried to display the src of the image but I get the below error.

TypeError: undefined is not an object (evaluating '_this3.item.image')

How to get the src from the image object? I'm a newbie in react native and react js. Please help me to get the image src.

Answer 1

您必须将 this.item.image 替换为 item.image.src

Answer 2

[
  {
    id: 51,
    name: 'Boat Neck Blouse',
    image: {
      id: 669,
      date_created: '2018-08-27T10:05:39',
      date_created_gmt: '2018-08-27T10:05:39',
      date_modified: '2018-08-27T10:05:39',
      date_modified_gmt: '2018-08-27T10:05:39',
      src:
        'https://dreamdesigners.rkhomeappliances.co.in/wp-content/uploads/2018/08/boatneck.jpg',
      title: 'boatneck',
      alt: '',
    },
    menu_order: 0,
  },
];

This is the way if you want to access the date_created (As an Example)

Try this

(Let's say the data is assigned to variable data ) As you can see the JSON starts with an array so you will have to access the content in the array. In this case, the array only has 1 content. So, if you access data[0] , you will get

{
  id: 51,
  name: 'Boat Neck Blouse',
  image: {
    id: 669,
    date_created: '2018-08-27T10:05:39',
    date_created_gmt: '2018-08-27T10:05:39',
    date_modified: '2018-08-27T10:05:39',
    date_modified_gmt: '2018-08-27T10:05:39',
    src:
      'https://dreamdesigners.rkhomeappliances.co.in/wp-content/uploads/2018/08/boatneck.jpg',
    title: 'boatneck',
    alt: '',
  },
  menu_order: 0,
};

then if you want to access date_created in image key, it will be data[0].image.date_created

Hope this helps you to understand accessing JSON data