React Native: How to access data in JSON object?

Question

I want to access data inside JSON object but I do not know how to in this case. 1. Why does my below example not work? 2. After fetching the whole JSON data, how can I navigate through the data to access necessary elements? I do not even know what to try or even where in the code to do this since I am already failing to even access one simple data.

Short explanation

Below works:

dataSource: responseJson.shosfc.weekday[7]
renderItem={({item}) => <Text>{item.min}</Text>}

This does not. WHY? All I did was simply moving .shosfc.weekday[7]

dataSource: responseJson
renderItem={({item}) => <Text>{item.shosfc.weekday[7].min}</Text>}

JSON API: https://api.myjson.com/bins/18o9sd

Second one gives an error:

TypeError: Cannot read property 'weekday' of undefined

This error is located at:

    in CellRenderer (at VirtualizedList.js:688)
    in RCTScrollContentView (at ScrollView.js:1007)
    in RCTScrollView (at ScrollView.js:1147)
    in ScrollView (at VirtualizedList.js:1081)
    in VirtualizedList (at FlatList.js:634)
    in FlatList (at App.js:42)
    in RCTView (at View.js:35)
    in View (at App.js:41)
    in FetchExample (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

renderItem
    injectUpdate.js:71:4
FlatList._this._renderItem
    FlatList.js:628:13
CellRenderer.render
    VirtualizedList.js:1741:20
CellRenderer.proxiedMethod
    createPrototypeProxy.js:44:29

Below is the entire code.

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class FetchExample extends React.Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true}
    }

    // make an API call in the beginning
    componentDidMount(){
        return fetch('https://api.myjson.com/bins/wa759')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    isLoading: false,
                    dataSource: responseJson.shosfc.weekday[7]
                }, function(){

                });

            })
            .catch((error) =>{
                console.error(error);
            });
    }

    render(){

        if(this.state.isLoading){
            return(
                <View style={{flex: 1, padding: 50}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        return(
            <View style={{flex: 1, paddingTop:50}}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={({item}) => <Text>{item.min}</Text>}
                    // keyExtractor={({id}, index) => id}
                />
            </View>
        );
    }
}

What you see when logging responseJson ?

DevAS
– DevAS

2019-07-28 08:53:43 +00:00
Commented Jul 28, 2019 at 8:53 — DevAS
– DevAS, Commented Jul 28, 2019 at 8:53

Matthieu Libeer · Accepted Answer · 2019-07-28 08:58:51Z

2

The FlatList component only accepts arrays for the prop data.

It seems responseJson.shosfc.weekday[7] is an array, while responseJson is an object.

Source: https://facebook.github.io/react-native/docs/flatlist#data

answered Jul 28, 2019 at 8:58

Matthieu Libeer

2,3551 gold badge14 silver badges18 bronze badges

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

Comments

remeus · Accepted Answer · 2019-07-28 09:02:52Z

<FlatList> needs the data to be a list of objects. This is the case when you pass responseJson.shosfc.weekday[7]:

[
  { min: 10, type: 'h' },
  { min: 17, type: 'h' },
  { min: 24, type: 'ht' },
  { min: 30, type: 'h' },
  { min: 35, type: 'ht' },
  { min: 40, type: 'h' },
  { min: 44, type: 'h' },
  { min: 48, type: 'h' },
  { min: 53, type: 'ht' },
  { min: 56, type: 'h' }
]

However it is not the case when you simply pass responseJson:

{
  shosfc: {
    weekday: { 
      '7': [Array],
      '8': [Array],
      '9': [Array],
      '10': [Array],
      '11': [Array],
      '12': [Array],
      '13': [Array],
      '14': [Array],
      '15': [Array],
      '16': [Array],
      '17': [Array],
      '18': [Array],
      '19': [Array],
      '20': [Array],
      '21': [Array],
      '22': [],
      '23': [],
    },
    // [...]
  },
  // [...]
}

Collectives™ on Stack Overflow

React Native: How to access data in JSON object?

Short explanation

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Short explanation

2 Answers 2

Comments

Comments

Related