Как перебрать json файл с индексом и отрендерить с реагировать нативный компонент?

Question

У меня есть JSON файл, подобный этому:

{
  "type": {
    "1": {
      "book_name": "Lorem ipsum",
    },
   "2": {
     "book_name": "Lorem ipsum",
   }
}

Мне нужно повторить каждое имя этого json файла.

В моем проекте я импортирую локальный json файл, подобный следующему:

import books from '../data/books.json';

Чтобы получить доступ к каждому имени, я могу сделать, например:

const names = books.type;
<Text>{names[1].book_name}</Text>

Я пытаюсь преобразовать свои данные в представление с помощью map function но я не понимаю, как использовать его в моем случае ..

Answer 1

Вы можете хранить свои значения в массиве и использовать его на карте

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

const books  = {"type":{
    "1":{
        "book_name":"Lorem ipsum",
    },
    "2":{
        "book_name":"Lorem ipsum",
    },
    "3":{
        "book_name":"Lorem ipsum",
    }
}}

    const array = [];

    Object.entries(books).map(([key, value]) => {
        Object.entries(value).map(([key, value]) => {
            Object.entries(value).map(([key, value]) => {
                array.push(value);
            })

        })
    })


  return(
    <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
  {array.map((item, key) => 
        {
            return(
            <View>
              <Text> {item} </Text>
            </View>
          )
        })}
      </View>
  );

Надеюсь, это поможет!

Answer 2

Вы можете использовать Object.values(obj), но лучшим подходом является свойство type - это массив объектов.

{
  "type": [{  "book_name": "Lorem ipsum"}, {"book_name": "Lorem ipsum"}]
}