如何使用索引迭代 json 文件并使用 React Native 组件进行渲染？

Question

I have a JSON file like this:

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

I need to iterate each name of this json file.

In my project I import the local json file like this:

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

To access each name, I can do for example:

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

I'm trying to render my datas into the view with the map function but I don't understand how to use it in my case..

Answer 1

You can store your values in a array and you can use it in map

You can do something like this:

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

Hope this helps!

Answer 2

You can use Object.values(obj) but the best approach is type property been an array of objects.

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