javascript - React Native Flatlist - How to loop through nested object - Stack Overflow

admin管理员组

文章数量:1420205

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.

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.

• javascript
• react-native
• react-native-flatlist
• nested-object

Share Improve this question Follow edited Apr 16, 2020 at 3:56 JamesG asked Apr 16, 2020 at 3:44 JamesGJamesG 1,60188 gold badges4444 silver badges9292 bronze badges 4

• Looks like the json data is an array. Is QuizData one element of the json response? – 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 ponent I have import QuizData from './quizData.json' – 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 Commented Apr 16, 2020 at 3:55
• I only want to show topicName and topicDescription. – JamesG Commented Apr 16, 2020 at 3:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

You need to have two maps:

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

本文标签： javascriptReact Native FlatlistHow to loop through nested objectStack Overflow