ReactNative ListView with Json Api

Question

I can't display json data in listview. I get json data in console.log but not in listview isLoading is always on false. I dont get any errors .catch(error => console.warn("error")). Result on screen is first View because this.state.isLoading is false.

Here is a code:

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

var productArray = [];

class ListViewDemo extends Component {
   constructor(props) {
    console.warn("constructor");
    super(props);
    var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
   this.state = {
      dataSource: dataSource.cloneWithRows(productArray),
     isLoading:true
   }
 }

  componentDidMount() {
    console.warn("componentDidMount");
    this.getTheData(function(json){
     productArray = json;
      console.warn(productArray);
     this.setState = ({
       datasource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));   
     console.warn("component ->  " + this.state.isLoading);
  }

  getTheData(callback) {
    console.warn("callback");
    var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json";
fetch(url)
     .then(response => response.json())
     .then(json => callback(json))
     .catch(error => console.warn("error"));
   }

  renderRow(rowData, sectionID, rowID) {
    console.warn("renderRow");
    return (
        <TouchableHighlight underlayColor='#dddddd' style={{height:44}}>
         <View>
         <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>{rowData.display_string}</Text>
         <Text style={{fontSize: 20, color: '#000000'}} numberOfLines={1}>test</Text>
         <View style={{height: 1, backgroundColor: '#dddddd'}}/>
        </View>
    </TouchableHighlight>
);
}

   render() {
   console.warn("render" + this.state.isLoading);
   var currentView = (this.state.isLoading) ? <View style={{height: 110, backgroundColor: '#dddddd'}} /> : <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true}/>
   return(
     <View>
       {currentView}
     </View>
   );
  }
}

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ListViewDemo);

user7747472 · Accepted Answer · 2018-06-17 18:09:58Z

2

I see a couple of mistakes here.

In your componentDidMount, you are setting datasource intead of dataSource:

  componentDidMount() {
    console.warn("componentDidMount");
    this.getTheData(function(json){
     productArray = json;
      console.warn(productArray);
     this.setState = ({
       //datasource:this.state.dataSource.cloneWithRows(productArray),
       dataSource:this.state.dataSource.cloneWithRows(productArray),
       isLoading:false
     })
    }.bind(this));   
     console.warn("component ->  " + this.state.isLoading);
  }

That's why you're not being able to render, because dataSource is never populated. It is just a little spelling mistake.

You are probably not getting into the second then in your getTheData method because you are not returning a Promise:

getTheData(callback) {
  console.warn("callback");
  var url = "https://raw.githubusercontent.com/darkarmyIN/React-Native-DynamicListView/master/appledata.json";
  fetch(url)
     //.then(response => response.json())
     .then(response => return response.json())
     .then(json => callback(json))
     .catch(error => console.warn("error"));
   }

Your are making a mistake with your setState, your are assigning it instead of calling it:

 //this.setState = ({
 //  datasource:this.state.dataSource.cloneWithRows(productArray),
 //  isLoading:false
 //})

 this.setState({
   dataSource:this.state.dataSource.cloneWithRows(productArray),
   isLoading:false
 })

Let me know if it works.

edited Jun 17, 2018 at 18:09

user7747472

1,9726 gold badges41 silver badges84 bronze badges

answered Jan 31, 2017 at 17:22

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

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

5 Comments

Facundo La Rocca Over a year ago

Ok, let's try something, change your renderRow from renderRow(rowData, sectionID, rowID) to renderRow(rowData) and bind it in the constructor this.renderRow = this.renderRow.bind(this);. And put into a View your TouchableHighlight in the renderRow method.

marko marinovic Over a year ago

same thing, the problem is that isLoading is alway on true when i log it

Facundo La Rocca Over a year ago

change your getData from .then(response => response.json()) to .then(response => return response.json()) . If you dont put return you are not going to enter in the second then.

Facundo La Rocca Over a year ago

Your setState is wrong, your are setting it instead of calling it. Check last update to my answer,

marko marinovic Over a year ago

Yes, setState was the problem, thanks a lot for your time

Timothy Macharia · Accepted Answer · 2021-09-01 23:12:21Z

1

You are setting the function setState instead of calling it

this.setState = ({
    datasource:this.state.dataSource.cloneWithRows(productArray),
    isLoading:false
})

should be

this.setState({
    datasource:this.state.dataSource.cloneWithRows(productArray),
    isLoading:false
})

edited Sep 1, 2021 at 23:12

Timothy Macharia

2,9561 gold badge22 silver badges27 bronze badges

answered Jan 31, 2017 at 17:37

Artur Nista

3591 silver badge4 bronze badges

2 Comments

marko marinovic Over a year ago

Thanks man , it solved my problem .. i spend few hours on this error

Artur Nista Over a year ago

Yep, that's happen... Do you understand what was your problem?

Collectives™ on Stack Overflow

ReactNative ListView with Json Api

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related