从变量React-Native将数据膨胀到FlatList

Question

I am storing a JSON file in the local storage using react-native-fs and fetching the data from the JSON file and storing it in a variable.

I want to fetch the data stored in the variable and inflate it on a FlatList.

I have tried

// getting data from the local file
var path = RNFS.DocumentDirectoryPath + '/test.json';
return RNFS.readFile(path, 'utf8')
  .then((success) => {
      console.log(success);//Data is storing successfully see console output below
      this.setState({        
      isLoading: false,
      dataSource: success.recordset //data is not getting separated with respect to recordset 
    });
    console.log(dataSource);//see outpout below
  })
  .catch((err) => {
    console.log(err.message);
  });

console.log(success) output

[{"recordset":[[{"id":1,"UPRN":552,"SiteName":"County Hall","DueDate":"2019-04-26T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"Completed"},{"id":2,"UPRN":554,"SiteName":"County Hall 2","DueDate":"2019-03-01T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"sync-in-progress"},{"id":3,"UPRN":1524,"SiteName":"County Hall 3","DueDate":"2019-03-02T00:00:00.000Z","SurveyStatus":"Survey-in-progress","SyncStatus":null},{"id":4,"UPRN":2546,"SiteName":"County Hall 4","DueDate":"2019-03-15T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":5,"UPRN":2156,"SiteName":"County Hall 5","DueDate":"2019-07-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":6,"UPRN":8945,"SiteName":"County Hall 6","DueDate":"2019-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":7,"UPRN":5214,"SiteName":"County Hall 7","DueDate":"2020-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null}]]

console.log(dataSource) output

dataSource is not defined

Flatlist code

    <FlatList
      data={this.state.dataSource}
      renderItem={({item}) =>
      <View style={styles.flatview}>
        <Text style={styles.name}>{item.UPRN}</Text>
        <Text style={styles.email}>{item.SiteName}</Text>
        <Text style={styles.email}>{item.DueDate}</Text>
        <Text style={styles.email}>{item.SurveyStatus}</Text>
        <Text style={styles.email}>{item.SyncStatus}</Text>
      </View>
      }
      keyExtractor={item => item.id}
    />

How do I inflate this data in FlatList with respect to id?

Answer 1

There's a few things going on here.

First, your dataSource is not defined message is because the console.log statement is outside the scope of the RNFS.readFile result.

Second you need to parse the JSON to convert the contents of the json file to objects, for example:

JSON.parse(success).then(result => this.setState({dataSource, result[0].recordset})

Third it looks like recordset is in an array which is why it's referenced above as result[0].recordset .

Answer 2

Just do it like

var path = RNFS.DocumentDirectoryPath + '/test.json';
return RNFS.readFile(path, 'utf8')
  .then((success) => {
      console.log(success);//Data is storing successfully see console output below

   const dataSource = success[0].recordset[0]

 this.setState({        
      isLoading: false,
      dataSource
    });
    console.log(dataSource);//see outpout below
  })
  .catch((err) => {
    console.log(err.message);
  });

the error is because you are using the datasource and it is undefined . you need to define the variable you are using.

and try to format your json array to

{"recordset":[{"id":1,"UPRN":552,"SiteName":"County Hall","DueDate":"2019-04-26T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"Completed"},{"id":2,"UPRN":554,"SiteName":"County Hall 2","DueDate":"2019-03-01T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"sync-in-progress"},{"id":3,"UPRN":1524,"SiteName":"County Hall 3","DueDate":"2019-03-02T00:00:00.000Z","SurveyStatus":"Survey-in-progress","SyncStatus":null},{"id":4,"UPRN":2546,"SiteName":"County Hall 4","DueDate":"2019-03-15T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":5,"UPRN":2156,"SiteName":"County Hall 5","DueDate":"2019-07-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":6,"UPRN":8945,"SiteName":"County Hall 6","DueDate":"2019-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":7,"UPRN":5214,"SiteName":"County Hall 7","DueDate":"2020-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null}]}

because you are accessing the wrong variable