How to map JSON nested object to flatlist in react native?

Question

I want to map my JSON data into flatlist so that i can list out my data from database. is it possible to do so or are there any other ways to do it? I had tried this for whole day and hope could be fix now.

This is my JSON:

{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}

This is my flatlist code:

    render() {
        console.log(this.state.retrieveData.id)
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }```

Maybe get rid of "-M1ytAolVL1xdnO0dXjD", "-M1ytGOJD62TwwEWOmMu"... these, so that your json looks like this [{"Favorite":false, ...}, {"Favourite": true,...}] — Mark
– Mark, Commented Mar 10, 2020 at 7:16
then you can make it [{"id": "-M1ytAolVL1xdnO0dXjD", "Favorite" : false,.....},...], using loop. Flat-list will take only arrays — Mark
– Mark, Commented Mar 10, 2020 at 7:21

Imjaad · Accepted Answer · 2020-03-10 07:20:53Z

1

you need to parse your json using JSON.parse() in order to use it for the flatlist, also Flatlist component only accepts arrays and not the objects. If you want to keep the object keys returned by the firebase try formatting your data first.

answered Mar 10, 2020 at 7:20

Imjaad

6044 silver badges13 bronze badges

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

Comments

Mark · Accepted Answer · 2020-03-10 07:30:15Z

You can do something like this -

constructor(props){
    super(props);
    this.state = {retrieveData: []};
}

componentDidMount() {
    // fetch your json here
    const json = {"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}};
    const list = [];
    for(const k in json) {
      list.push({
        id: k,
        ...json[k],
      })
    }
    this.setState({retrieveData: list});
}

Then

render() {
        return (
            <View>
                <Text>A</Text>   
                    <FlatList data={this.state.retrieveData}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    >
                        <Text>B</Text>
                    </FlatList>
            </View>
        )
    }

Kyr · Accepted Answer · 2020-03-10 07:37:57Z

For the very first you could parse raw JSON string:

const rawData = JSON.parse('{"-M1ytAolVL1xdnO0dXjD": {"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, "-M1ytGOJD62TwwEWOmMu": {"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}}')

then transform into array of values:

const data = Object.values(rawData);
/*
// will produce 
  [
{"Favourite": false, "ItemIdentity": "Qjwj", "ItemName": "Sjsj", "ItemQuantity": "1"}, 
{"Favourite": true, "ItemIdentity": "This is my thing", "ItemName": "Acer laptop", "ItemQuantity": "12"}
]
*/

Important: You should not do it inside render(). Fill free to move such transformation near to fetching.

And then use data in render:

render() {
        console.log(this.state.data)
        return (
            <View>
                <Text>Data</Text>   
                    <FlatList data={this.state.data}
                        renderItem={({ item }) => (
                            <ListItem title={item.Favourite} />
                        )}
                    />
            </View>
        )
    }

Collectives™ on Stack Overflow

How to map JSON nested object to flatlist in react native?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related