How to pop results from sqlite in Array in react-native?

Question

I am a completely newbie in react native and i am trying to learn it. I want to get results from SQLite and pop them in the array which i could then use in Flat list to display .. Here is my Code:

    //imports

import React,{Component} from 'react';
import {View,Text,FlatList} from 'react-native';



//create component

var SQLite = require('react-native-sqlite-storage')
var db=SQLite.openDatabase({name: 'test.db', createFromLocation: '~sqliteexample.db'})

class DbTask extends Component {


    constructor(props){
        super(props)

        this.state={
            data: []

        };

        db.transaction((tx)=>{

            tx.executeSql('Select * from `pet`',[],(tx,results)=>{

               var len=results.rows.length;
                for(let i=0; i<len; i++){
                 var row=results.rows.item(i);
                 this.state.data.push(row.owner);

                 }


            });

        });

    };


    render(){

        return(
        <View>

           <FlatList data={this.state.data} 
           renderItems={
            ({item})=> <Text>{item.owner}</Text>

           }
           > </FlatList>
        </View>
        );

     }

}


export default DbTask;

I tried to add some alerts in For loop and it showed me correct names of the owners . But i don't get it , either i am not able to push them in the "data" array or my Flat list isn't working.

Any help would be appreciated. Thanks in advance. Regards.

Andrew · Accepted Answer · 2019-02-03 15:54:48Z

1

P.S : I modified my database a little so other than that the problem was in my flat-List. Just modified the flat-List like below and it worked like a charm:

<FlatList 
    data={this.state.data} 
    keyExtractor={((item, index) => "itemNo-" + index)}
    renderItem={({item}) => (
        <View style={{flex:1 , flexDirection:'row',justifyContent:'flex-start',marginBottom:10}}>
            <View style={{paddingLeft:20,width:60}}>
            <Text>{item.Number}</Text>
            </View>
            <View style={{paddingLeft:40,width:120}}>
            <Text>{item.Owner}</Text>
            </View>
            <View style={{paddingLeft:50,width:150}}>
            <Text>{item.PetName}</Text>
            </View>
        </View>
    )
  }
/>

edited Feb 3, 2019 at 15:54

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

answered Jul 30, 2018 at 12:22

Khalil Ahmed

114 bronze badges

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

1 Comment

raza9798 Over a year ago

Thank this. work for me. but unfortunately i cannot map the array. when i map an array it says undefined. is there any solutions?

Collectives™ on Stack Overflow

How to pop results from sqlite in Array in react-native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related