Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How Fetch the particular data from the online API in react-native

See original GitHub issue

I fetch the API data and store in the array and then I print that data in return() method but it’s give me all the data of API . I have no idea how take particular data from the particular index

import React, { Component } from 'react';
import { View, ScrollView, KeyboardAvoidingView, Alert, StyleSheet, FlatList, Text, ActivityIndicator } from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage';
var db = openDatabase({ name: 'UserDatabase.db' });

export default class API extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            employee_id: '',
            employee_name: '',
            employee_salary: '',
            employee_age: '',
            isLoading: true,
        };
    }
    componentDidMount() {
        return fetch('http://dummy.restapiexample.com/api/v1/employees')
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState(
                {
                    isLoading: false,
                    dataSource: responseJson,
                },
            );
        })
        .catch((error) => { console.error(error);});
    }

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

        return (
            <View style={{ backgroundColor: 'white', flex: 1 }}>
                <ScrollView keyboardShouldPersistTaps="handled">
                    <KeyboardAvoidingView
                        behavior="padding"
                        style={{ flex: 1, justifyContent: 'space-between' }}>
                        <View style={{ flex: 1, }}>
                            <View style={[styles.MainContainer,{  flexDirection: 'row', borderColor: 'black', borderWidth: 1}]}>
                                <View style={{ borderColor: 'black', borderRightWidth: 0.5, width: '15%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_id => this.setState({ employee_id })} >Id</Text></View>
                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, borderRightWidth: 0.5, width: '52%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_name => this.setState({ employee_name })} >Name</Text></View>
                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, borderRightWidth: 0.5, width: '23%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_id => this.setState({ employee_id })} > Salary</Text></View>
                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, width: '10%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_age => this.setState({ employee_age })} >Age</Text></View>
                            </View>
                            <FlatList
                                data={this.state.dataSource}
                                renderItem={({ item }) =>
                                    <View style={styles.MainContainer}>
                                        <View style={{ marginTop: 5 }}>
                                            <View style={{ width: '100%', flexDirection: 'row', borderColor: 'black', borderWidth: 1 }}>
                                                <View style={{ borderColor: 'black', borderRightWidth: 0.5, width: '15%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_id => this.setState({ employee_id })} >{item.id}</Text></View>
                                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, borderRightWidth: 0.5, width: '52%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_name => this.setState({ employee_name })} > {item.employee_name}</Text></View>
                                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, borderRightWidth: 0.5, width: '23%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_id => this.setState({ employee_id })} > {item.employee_salary}</Text></View>
                                                <View style={{ borderColor: 'black', borderLeftWidth: 0.5, width: '10%', backgroundColor: '#F5FCFF' }}><Text style={{ fontSize: 20, }} onChangeText={employee_age => this.setState({ employee_age })} > {item.employee_age}</Text></View>
                                            </View>
                                        </View>
                                    </View>
                                }
                                keyExtractor={({ id }, index) => id}
                            />
                        </View>
                        
                    </KeyboardAvoidingView>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    MainContainer:{
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        flex: 1,
        margin: 2,
    },
});

Then i change the code and try Array

import React from 'react';
import { FlatList, ActivityIndicator, Text, View, StyleSheet, ScrollView, Alert, KeyboardAvoidingView, TouchableOpacity } from 'react-native';
import { openDatabase } from 'react-native-sqlite-storage';
import { TextInput } from 'react-native-gesture-handler';
var db = openDatabase({ name: 'UserDatabase.db' });

const Person = (props) => {
    return(
        <View>
            <Text style={[styles.text, { fontWeight: 'bold' }]}>{props.Person.id}</Text>
            <Text style={[styles.text,]}><Text style={{ fontWeight: 'bold' }}>-></Text>userId={props.Person.userId}</Text>
            <Text style={styles.text}><Text style={{ fontWeight: 'bold' }}>-></Text>{props.Person.title}</Text>
            <Text style={styles.text}><Text style={{ fontWeight: 'bold' }}>-></Text>{props.Person.body}</Text>
        </View>
    )
}
export default class MAPI extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            id: '',
            title: '',
            body: '',
            data:[],
        }
    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/posts', {method: 'GET'})
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState(
                {
                    isLoading: false,
                    data: responseJson
                },
            );
        })
    }

    alertItemName = (item) => {
        Alert.alert(item.title);
    }

    render() {
        // const data = this.state.data
        let data = this.state.data
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, padding: 20, alignContent:'center',alignItems:"center" }}>
                    <ActivityIndicator />
                    <Text style={{color: 'red', fontSize:20}}>Loading....</Text>
                </View>
            )
        }
        return (
            <View>
                <ScrollView>
                    {
                        this.state.data.map((item, index) => (
                            <TouchableOpacity key={item.id} style={styles.container}onPress={() => this.alertItemName(item)}>
                                <Person key={item.title} Person={item} />
                            </TouchableOpacity>
                        ))
                    }
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 5,
        marginTop: 3,
        backgroundColor: '#F5FCFF',
        alignItems: 'flex-start',
        borderColor: 'black',
        borderWidth:1,
    },
    text: {
        color: 'black',
        fontSize: 20
    }
});

where i need to change?

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

adisencommented, Mar 22, 2019

If I get you well, you only want to fetch a particular employees info? From the API’s documentation, you can do it like this: componentDidMount() { return fetch('http://dummy.restapiexample.com/api/v1/employees/{id}') .then((response) => response.json()) .then((responseJson) => { this.setState( { isLoading: false, dataSource: responseJson, }, ); }) .catch((error) => { console.error(error);}); }

Where Id is the ID of the particular employee you want to get

0reactions

aniket07-gitcommented, Jun 6, 2020

I am also stuck. Need suggestions ?