React native load data from json which stored in github

Question

I have a json file. Link here

{"Cat": [
	{"key": "a",
	 "title": "Bangladesh",
	 "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/bangladesh.jpg",
	 "news": [
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"}
         ]
	},
	{"key": "b",
	 "title": "Sports",
	 "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/sports.jpg",
	 "news": [
	  {"key": "a", "title": "BD vs IND", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 rgybfdf enfijn efnhiueh fnhiueh fhiuerhngf reuigfr fhiuerhngf 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "ICC Cricket World Cup", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf huiwghf 3ejfow fnhbviuo fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"},
	  {"key": "a", "title": "ICC T20", "details": "rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9 gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i 9ewhdf8 hwed7uhyeu ewhdfyuh"},
	  {"key": "b", "title": "DITF 2018", "details": "rgybfdf enfijn efnhiueh fhiuerhngf reuigfr rhgiuhs huiwghf 3ejfow fnhbviuo rgybfdf ehf euhfiue eshfu9he eh9f9uhe ehgf9gy gefgey8 egf8 9ewgf89e 9ewghf8g 9ewhfd8i fhgiuh hguhsi ruhgiuherih shif"}
	 ]
	},
	{"key": "c", "title": "Politics", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/politics.jpg"},
	{"key": "d", "title": "Entertainment", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/entertainment.png"},
	{"key": "e", "title": "Economics", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/economics.jpg"},
	{"key": "f", "title": "Technology", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/technology.jpg"},
	{"key": "g", "title": "Others", "image": "https://raw.githubusercontent.com/mudassir21/server/master/img/m.jpg"}
]
}

Now I want to load only one news array which user selects. Here my code of loading data.

componentDidMount() {
	    return fetch('https://raw.githubusercontent.com/mudassir21/server/master/newsCategory.json')
	      .then((response) => response.json())
	      .then((responseJson) => {
	        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
	        this.setState({
	          isLoading: false,
	          dataSource: ds.cloneWithRows(responseJson.Cat),
	          dataNews: ds.cloneWithRows(responseJson.Cat[this.state.rowNo].news)
              }, function() {
	          // do something with new state
	        });
	      })
	      .catch((error) => {
	        console.error(error);
	      });
	  }

Here the code of view data

<ListView
		          dataSource={this.state.dataNews}
		          //dataSource={news}
		          renderRow={(rowData) => 
		          	<TouchableOpacity
					  	style={styles.option}
					  	onPress = { ()=> this.setState({ newsTitle: rowData.title, newsDetails: rowData.details })}
					  >
		          	<Text style={styles.title}>{rowData.title}</Text>
		          	<Text>{rowData.details}</Text>
		          	</TouchableOpacity>
		          }
		        />

I set the state value of rowNo 0 in the constructor. But I want to change this state variable value by clicking a button and then want to set the dataNews value with new rowNo value. In every click of a button there sets new value of rowNo so there needs to set new data in dataNews every time. How can i do this?

Mudassir Zakaria · Accepted Answer · 2018-01-21 11:37:18Z

1

use another function for loading data and call it every click. Like this

newsLoad(num) {
	  	this.setState({rowNo: num});
	    return fetch('https://raw.githubusercontent.com/mudassir21/server/master/newsCategory.json')
	      .then((response) => response.json())
	      .then((responseJson) => {
	        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
	        this.setState({
	          isLoading: false,
	          dataNews: ds.cloneWithRows(responseJson.Cat[this.state.rowNo].news)
	        }, function() {
	          // do something with new state
	        });
	      })
	      .catch((error) => {
	        console.error(error);
	      });
	  }

answered Jan 21, 2018 at 11:37

Mudassir Zakaria

4371 gold badge7 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React native load data from json which stored in github

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related