React Native Flatlist - Как l oop через вложенный объект - PullRequest
Новая
       33

React Native Flatlist - Как l oop через вложенный объект

0 голосов
/ 16 апреля 2020

У меня есть JSON возвращенный объект из файла ./jsonData.json.

Внутри этого файла у меня есть эти данные:

Примечание. Это целые JSON загруженные данные из файла. 

import QuizData from './quizData.json'

Это новое приложение, поэтому QuizData - это все следующее: 

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

Я пытаюсь получить имя topi c для каждый нашел и выложил как текст.

Вот мой код: 

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

Я также пытался: 

{item.topics.[index].topicName}

и 

{item.topics[index][topicName]}

Но я получаю ошибку:

undefined не является объектом.

Тогда я подумал, что, возможно, его необходимо: 

data={QuizData.topics}

, а затем изменим renderItem на: 

{item.topicName}

На этот раз ошибки нет, но текст также не выводится на экран.

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Вы можете сделать что-то вроде этого 

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>
      )}
    />
  );
}

Где data.json - это файл json в каталоге root с вашими данными.

0 голосов
/ 16 апреля 2020

Вам нужно иметь две карты: 

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