How to use json file fetch in react native

Question

How should I use json data in flatlist?

This is the code I have

import React, { Component } from 'react'
import { Text, View, Button, YellowBox, FlatList, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper'
import {styles} from '../style/styles'

class NavtexPage extends Component {
  constructor(props) {//function
    YellowBox.ignoreWarnings([
      'Warning: componentWillReceiveProps is deprecated',
      'Warning: componentWillUpdate is deprecated',
    ]);
    super(props);
    this.state = {
      indexPage: 0,
      isLoading: true,
    }
  }

  //fetch API
  componentDidMount = () => {
    fetch('http://localhost:3000/jsondb/2',
      {
        method: "GET",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      })//여기까지 fetch : requests 
      .then((response) => response.json())//fetch : response
      .then((responseData) => {
        console.log("성공 : ", responseData);
        this.setState({
          isLoading: false,
          data: responseData
        })
      })
      .catch((error) => {
        console.error("api error : " + error.message);
      });
  }

  //_renderItem how to json
  _renderItem = ({ item, index }) => {
    console.log('json : ', item);    
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 0.1, backgroundColor: 'green' }}>
          <Text>NAVTEX</Text>
        </View>
          <View>
            <FlatList//i don't know
              style={{ flex: 1, marginTop: 50, borderWidth: 1, borderColor: 'red' }}
              data={this.state.data}
              numColumns={1}
              renderItem={this._renderItem}
              // keyExtractor={(item, index) => item.no.toString()}
              keyExtractor={(item => )}
              />
          </View>//help
      </View>
    );
  }
}

export default NavtexPage;

----------------------------ex.json

 [
        {
            "Page1_1" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "",
                }
            ]
        },
        {
            "Page1_2" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "Ping to 155.155.1.2 (NAVTEX TX2 at HF Site)",
                    "action_img" : "",
                    "is_ok" : "",
                }
             ]
          }
    ]

Lenoarod · Accepted Answer · 2019-09-24 06:05:17Z

1

Firstly, you need to parse the json to array or object,then assign it to your flatlist data

  .then((responseData) => {
    let result = Json.parse(responseData)
   // you data is array,and have page
    let curPageData = result.page1_1
    this.setState({
      isLoading: false,
      data: curPageData
    })
  })

answered Sep 24, 2019 at 6:05

Lenoarod

3,63116 silver badges25 bronze badges

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

2 Comments

김회준 Over a year ago

What should page2_2 do?

Lenoarod Over a year ago

look you below data, the page?_? is the data key, after convert data, it likes a map. the page?_? is every child array key, you can use anyone by result.key

Raj Gohel · Accepted Answer · 2019-09-24 05:52:07Z

0

You can try map function also.

sample code:-

this.state.data.map((data) => { //main data array

 return(

  data.map((insideData) => { //you can access page1_1 ... pages

   return(

    <Text>{insideData.main_subject}</Text> 
    .....

   )

  })      

 )     

})

answered Sep 24, 2019 at 5:52

Raj Gohel

1,1109 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to use json file fetch in react native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related