ReactNative - Parsing json file and display data

Question

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: '',
    textinput:'',
  }
   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) => {
        console.error(error);
        })
        .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)})

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

       .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>

                <Text>{this.state.data}</Text>  
            </View>
    );
    }
}


module.exports = Temp;

i am developing an android app, i need to fetch data from web services that is json file. i am able to get all the, something it looks like raw data, but i need to parse that data and display only few contents.

{
"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": "121"
},
  {
"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": "122"
},
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "123"
}
]
}

This is my data looks like.

i am able to display like

{"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": "121"
},{"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": "122"},{"entryDate": 03/02/2017","entryDateTime": "03/02/2017 2:00 AM","entryTime": "2:00 AM", "systol": "123"}]}

but i want to display like this, only entryDate and systol

entryDate:03/02/2017
systol:120
entryDate:03/02/2017
systol:121
entryDate:03/02/2017
systol:122
entryDate:03/02/2017
systol:123

please help me to solve this problem. Thank you

Prasanna · Accepted Answer · 2017-03-17 15:30:14Z

1

Replace your render function with the following:

render() {

  const { List: list } = this.state.data
  const renderList = list && list.map(({entryDate, systol},index) => {
    return (
      <View key={index}>
        <Text>{entryDate}</Text>
        <Text>{systol}</Text>
      </View>
    )
  })
  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>

      {renderList}

    </View>
  );

}

Everything you need is to map over the list and pick entryDate and systol from the item that is being mapped. Then tell React what is need to be rendered according to current data item (entryDate, systol).

edited Mar 17, 2017 at 15:30

Prasanna

3471 gold badge7 silver badges22 bronze badges

answered Mar 16, 2017 at 7:40

Patrik Prevuznak

2,2711 gold badge17 silver badges14 bronze badges

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

5 Comments

Prasanna Over a year ago

i am getting like "undefined is not an object (evaluating 'list.map')"

Prasanna Over a year ago

is url must end with .json only or what??

Patrik Prevuznak Over a year ago

I do not know why it is not displaying anything, as you said you are able to display {"List":[{"entryDate": "03/02/2017","entryDateTime":"03/02/2017 2:00 AM","entryTime": "2:00 AM","systol": "120"}, ...... so the above code should work to display only entryDate and systol. I would not say that the problem is in url.

Prasanna Over a year ago

is that possible to create one local .josn file and move all data in that then import that .json file and display the data?

Prasanna Over a year ago

Thank you so much:) its working.. 90% is done. but i am getting warnings

Collectives™ on Stack Overflow

ReactNative - Parsing json file and display data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related