JsonArray Listview with React Native?

Question

This may be dumb question am trying to fetch json array from server and set it in listview, Today only i started doing react js so bit confused how to do this am getting null is not an object(evaluating 'this.state.datasource') don't know where am making mistake let me post my code what i tried so far this is index.android code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  View
} from 'react-native';

export default class SecondProject extends Component {
      constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  })
  }
  componentDidMount () {
   this.getContractList()
}

  render() {
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseJson)});
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={rows}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
    getContractList() {
      return fetch('url')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({isLoading: false, jsonData: responseJson});
        ///  console.log(responseJson);
          return responseJson;
        })
        .catch((error) => {
         // console.error(error);
        });
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SecondProject', () => SecondProject);

and this is json response from server:

[
        {
        "HeaderText":"Contract Approval",
        "ApprovalType":"C",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Contract Specification Approval",
        "ApprovalType":"CS",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Request Approval",
        "ApprovalType":"SPR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Non Return Approval",
        "ApprovalType":"SPNR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Purchase Request Approval",
        "ApprovalType":"SPRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Request Approval",
        "ApprovalType":"SSRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        }
]

how to deal with this can someone helpme out thanks in advance!!

Have you tried { this.state.datasource && <ListView dataSource={rows} renderRow={(rowData) => <Text>{rowData}</Text>} />} — fiddlest
– fiddlest, Commented Mar 16, 2017 at 16:51

vinayr · Accepted Answer · 2017-03-16 15:02:14Z

3

Try something like this -

constructor(props) {
  super(props);

  this.state = {
    jsonData: null
  };

  this.dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  });
}

  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        {this.state.jsonData &&
          <ListView
            dataSource={this.dataSource.cloneWithRows(this.state.jsonData)}
            renderRow={(rowData) => <Text>{rowData.title}</Text>}
          />}
      </View>
    );
  }

  getContractList() {
    var url = 'https://facebook.github.io/react-native/movies.json';
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({isLoading: false, jsonData: responseJson.movies});
      })
      .catch((error) => {
       //console.error(error);
      });
  }

edited Mar 16, 2017 at 15:02

answered Mar 16, 2017 at 14:49

vinayr

11.3k3 gold badges49 silver badges44 bronze badges

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

3 Comments

vinayr Over a year ago

it should work...check my updated answer which uses sample json

M.Yogeshwaran Over a year ago

you missed componentDidMount i have added it works now thanks

M.Yogeshwaran Over a year ago

sure vinay how can i add more than one item in listview from json

ultra · Accepted Answer · 2017-03-16 14:49:23Z

-1

I am not an expert on react native but I noticed that in your fetch('url')the URL isn't defined anywhere. I would suggest putting the URL of the Json there.

answered Mar 16, 2017 at 14:49

ultra

115 bronze badges

1 Comment

M.Yogeshwaran Over a year ago

i have just mentioned url instead of having my ip

Collectives™ on Stack Overflow

JsonArray Listview with React Native?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related