Using API in react native

Question

I am new in react native.I have an api address and i need some data from it to display as list.When i try to do it it does not shows the result. My code is written below. Please check it and help me to work this code. I need to print data such as:

SYMBOL,SUPPLY,FULLNAME,NAME,ID,VOLUME24HOURTO of each data

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform} from 'react-native';

export default class Project extends React.Component {

  constructor(props)
  {

    super(props);

    this.state = { 
    isLoading: true
  }
  }

  componentDidMount() {

       return fetch('https://min-api.cryptocompare.com/data/top/volumes?tsym=BTC')
         .then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             isLoading: false,
             dataSource: responseJson
           }, function() {
             // In this block you can do something with new state.
           });
         })
         .catch((error) => {
           console.error(error);
         });
     }

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  GetFlatListItem (FULLNAME) {

  Alert.alert(FULLNAME);

  }


  render() {

    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

<View style={styles.MainContainer}>

       <FlatList

          data={ this.state.dataSource }

          ItemSeparatorComponent = {this.FlatListItemSeparator}

          renderItem={({item}) => <Text style={styles.FlatListItemStyle} onPress={this.GetFlatListItem.bind(this, item.FULLNAME)} > {item.FULLNAME} </Text>}

          keyExtractor={(item, index) => index}

         />


</View>

    );
  }
}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,

},

FlatListItemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },

});

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

Is your data source an array of JSON objects? like [{FULLNAME:Hungry},{FULLNAME:Soul},{FULLNAME:HungrySoul}] ?? — HungrySoul
– HungrySoul, Commented Apr 24, 2018 at 6:56

Roy Wang · Accepted Answer · 2018-04-23 06:27:44Z

0

The JSON response from the url is an object. Change to dataSource: responseJson.Data to get the array that can be rendered by FlatList.

answered Apr 23, 2018 at 6:27

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

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

10 Comments

sindhoorit avm Over a year ago

render() { let data="kli"; fetch(url, { method: 'POST', // or 'PUT' // body: JSON.stringify(url), // data can be string or {object}! headers: new Headers({ 'Content-Type': 'application/json' }) }).then(res => res.json()) .catch(error => console.error('Error:', error)) .then((response) =>{ console.log('Success:',data); data=JSON.stringify(response); console.log('Success:',data); this.setState({ data:JSON.stringify(response) }) }) return ( <View> <Text>haiii {this.state.data}</Text> </View>

Roy Wang Over a year ago

@sindhooritavm what?

sindhoorit avm Over a year ago

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

sindhoorit avm Over a year ago

sry, i cannot list it properly.now the data are display bt no proper listing

Roy Wang Over a year ago

Not sure what you are talking. Please add code to OP and elaborate, or open a different question if it's unrelated.

|

Hiren Vaghela · Accepted Answer · 2018-04-23 06:29:47Z

0

Please refer any basic tutorial for build your need so you can easily understand all state and what changes you need. and also put console.log() for check log every state.

for tutorial Flat list data show from Web-api

For set datasource changes check

answered Apr 23, 2018 at 6:29

Hiren Vaghela

9301 gold badge10 silver badges22 bronze badges

1 Comment

sindhoorit avm Over a year ago

i get api datas btt the problem is i cannot list it properly

Collectives™ on Stack Overflow

Using API in react native

2 Answers 2

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related