How to iterate json file with index and render with react native component?

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..

Goskula Jayachandra · Accepted Answer · 2020-04-14 16:30:27Z

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!

edited Apr 14, 2020 at 16:30

answered Apr 14, 2020 at 7:13

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

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

Comments

Diego Oliveira · Accepted Answer · 2020-04-13 14:23:33Z

0

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"}]
}

answered Apr 13, 2020 at 14:23

Diego Oliveira

314 bronze badges

1 Comment

Jean R. Over a year ago

Hi Diego Oliveira, I can't reformat my json file. Too big ! I need to iterate this json file to avoid the manual writing

Collectives™ on Stack Overflow

How to iterate json file with index and render with react native component?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related