React Native Flatlist - How to loop through nested object

Question

I have a JSON returned object from a file ./jsonData.json.

Inside this file, I have this data:

Note: This is the whole JSON data loaded from the file.

import QuizData from './quizData.json'

This is a new app, so QuizData is all of the following:

[
    {
        "id": 1,
        "name": "Lesson 1",
        "topics": [
            {
                "topicID": 1,
                "topicName": "Science",
                "topicDescription": "Science quiz questions"
            },
            {
                "topicID": 2,
                "topicName": "General Knowledge",
                "topicDescription": "General Knowledge Quiz Questions"
            }
        ]
    }
]

I am trying to get the topic name for each one found and put it out as a Text.

Here is my code:

<FlatList
    data={QuizData}
    renderItem={({ item, index }) =>
        <View>
            <Text>{item.topics.topicName}</Text>
        </View>
    }
    keyExtractor={(item) => item.topicID.toString()}
/>

I have also tried:

{item.topics.[index].topicName}

and

{item.topics[index][topicName]}

But I get the error:

undefined is not an object.

I then thought perhaps its needs to be:

data={QuizData.topics}

and then change the renderItem to:

{item.topicName}

This time there is no error, but there is also no output of text to the screen.

Looks like the json data is an array. Is QuizData one element of the json response? — moficodes
– moficodes, Commented Apr 16, 2020 at 3:52
QuizData is the whole json file. and that JSON shown is the whole of the json. Its a new app - im just starting out. At the top of this component I have import QuizData from './quizData.json' — JamesG
– JamesG, Commented Apr 16, 2020 at 3:54
so what you have is an array of an array. do you want to show all the options in a single entry in the flatlist? — moficodes
– moficodes, Commented Apr 16, 2020 at 3:55

moficodes · Accepted Answer · 2020-04-16 04:01:46Z

7

You could do something like this

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

import data from './data.json';

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({ item, index }) => (
        <View>
          {item.topics.map((v, i) => (
            <>
              <Text>{v.topicName}</Text>
              <Text>{v.topicDescription}</Text>
            </>
          ))}
        </View>
      )}
    />
  );
}

Where data.json is a json file in the root directory with your data.

answered Apr 16, 2020 at 4:01

moficodes

8991 gold badge7 silver badges21 bronze badges

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

5 Comments

moficodes Over a year ago

snack.expo.io/@moficodes/433f06 you could try this out here.

JamesG Over a year ago

Perfect, This works. Will accept when I can. May I ask you some questions: What are the blank tags for you have surrounding texts? Will this cause potential memory issues if lets say this ended up being 5-6 levels down and I have to keep mapping it like so? if yes, any suggestions for improvement? I also get the warning "each child chould have its own key" how would add that?

moficodes Over a year ago

because in react / react native everything has to be under one parent tag. usually you will see a lot of empty <View> tag. The empty tag lets us enclose two returns with an empty tag but nothing is rendered. Its called the Fragment. you can learn more here reactjs.org/docs/fragments.html

moficodes Over a year ago

I would first see what is the data source. There could be some pre flattening of the data. Totally depends on what you are trying to render. From the example what it looks like the data is of a list of lessons and each lesson has some topic. If you want to render each lesson as a flatlist item the above will work fine. If you want to render each topic as a flatlist item maybe it will need some reordering either at the data level or at react native lever. Map of map of map might be too complicated to make sense of down the line, also if the data is big and changing will create some issues

JamesG Over a year ago

Thank you for your time explaining those.

Mossen · Accepted Answer · 2020-04-16 03:56:48Z

0

You need to have two maps:

YOUR_OBJECT.map(item => Object.keys(item.topics).map(index => (
   return console.log(item.topics[index].topicName)
   )
));

answered Apr 16, 2020 at 3:56

Mossen

6047 silver badges18 bronze badges

2 Comments

JamesG Over a year ago

Does this go inside the renderItem={} ?

Mossen Over a year ago

Yes, but I would create a function and call it in the render

Collectives™ on Stack Overflow

React Native Flatlist - How to loop through nested object

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related