Extract data from JSON list in React native

Question

I want to parse a JSON file and display some data on the screen. I am able to display all the data using the following code, but I want to display only entryDate and sysol. Is it possible to use a for loop in _onPressButtonGET() and display data there only?

       import React, { Component } from 'react';
        import {
          AppRegistry,
          StyleSheet,
          Text,
          View,
          Navigator,
          TouchableOpacity,
          Image,
          TouchableHighlight,
          Alert,
          TextInput
        } from 'react-native';
        import Button from 'react-native-button'
        import {Actions} from 'react-native-router-flux'
        import Home from './Home'

        export class Temp extends Component{
        constructor(props) {
          super(props);
        this.state = {
            data: '',
            data1:'',
            textinput:'',
            entryDate:[]

          }
           state={
                    shouldShow: false
                }
        }

            componentDidMount(){
            this._onPressButtonGET();
          } 

              _onPressButtonPOST(){
                fetch(URL, {
                    method: "POST",  
                     headers: { 
                         'Accept': 'application/json',
                         'Content-Type': 'application/json',
                     },
                    body: JSON.stringify({
                        "entryDate":"3/2/2017 2:00 AM", 
                        "systol": this.state.textinput,
                        "mobileType":"ANDROID",
                        "userName":"menutest",

                       })})
                .then((response) => response.json())
                .then((responseData) => {
                    Alert.alert(                              
                        "Blood pressure data",
                        "Blood pressure data - " + JSON.stringify(responseData)
                    )
                }).catch((error) => {
                    Alert.alert('problem while adding data');
                })
                .done(); 
            }

            _onPressButtonGET(){
                fetch(url, {
                    method: "POST",
                     headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json',
                     },
                    body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})})
                .then((response) => response.json())
                .then((responseData) => {


                        this.setState({ data : JSON.stringify(responseData) })
data["list"].map(d => this.state.entryDate.push(d.entryDate));


                        this.setState({ entryDate: jsonResponse.entryDate, systol: responseData.systol })


                    }).catch((error) => {
                    Alert.alert('problem while getting data');
                })
               .done();
            }
            render(){
                return(

                    <View>
                        <TouchableHighlight onPress={this._onPressButtonPOST.bind(this)}>
                            <Text>Add</Text> 
                        </TouchableHighlight>

                    <TouchableOpacity style= {{left:300,top:-20, }}
         onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}}
        ><Text>Edit</Text></TouchableOpacity>

        {this.state.shouldShow ? <TextInput placeholder='systol' 
                    onChangeText={(text) => this.setState({textinput: text})}
                   /> : null}

                         <TouchableHighlight onPress={this._onPressButtonGET.bind(this)}>
                            <Text>show</Text>
                           </TouchableHighlight>
this.state.entryDate.map( d => (<Text>{d}</Text>));
                           <Text>{this.state.entryDate}</Text> //not displaying anythong
                       <Text>{this.state.data && JSON.parse(this.state.data)['entryDate']}</Text> //not displaying anything
                        <Text>hello{this.state.data}</Text> //printing all data 
                    </View>
            );
            }
        }


        module.exports = Temp;

JSON:

{
  "List": [
    {
      "entryDate": "03/02/2017",
      "entryDateTime": "03/02/2017 2:00 AM",
      "entryTime": "2:00 AM",
      "systol": "120"
    },
    {
      "entryDate": "03/02/2017",
      "entryDateTime": "03/02/2017 2:00 AM",
      "entryTime": "2:00 AM",
      "systol": "120"
    }
  ]
}

so it's a problem with your api call , check your request and your server. — Ahmed Ali
– Ahmed Ali, Commented Mar 14, 2017 at 8:33

Ahmed Ali · Accepted Answer · 2017-03-14 08:04:43Z

4

first initialize entryData as array

this.state = {
   entryDate: [],
}

in _onPressButtonGET() use

data["List"].map(d => this.state.entryData.push(d.entryDate));

in render use map to display all data like that

this.state.entryDate.map( d => (<Text>{d}</Text>));

edited Mar 14, 2017 at 8:04

answered Mar 14, 2017 at 7:49

Ahmed Ali

2,6782 gold badges28 silver badges40 bronze badges

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

3 Comments

Prasanna Over a year ago

you mean entryDate?

Ahmed Ali Over a year ago

sorry yup entryDate

Prasanna Over a year ago

error like cant find variable:d. this error is in render

Dayanithi Natarajan · Accepted Answer · 2017-09-18 05:55:49Z

    onPressButtonGET(){
                fetch(url, {
                    method: "POST",
                     headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json',
                     },
                    body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})})
    }
        .then(response => {
            this.setState({entryDate:response.data})
        });


renderEntryDate() {
    this.state.entryDate.map((item)=>{
      <Text>{item.entryDate}</Text>
    })
    }

render() {
    return (
      <View>
      <Button style= {{
                  backgroundColor: '#6656B4',
                  width: 200,
                  height: 40,
                 }
                onPress={() => this.onPressButtonGET()}
                title="Get Weather"
                color="#841584"
        />
        {this.renderEntryDate()}
      <View>
    );
}

Collectives™ on Stack Overflow

Extract data from JSON list in React native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related