How to handle object and Array in react native?

Question

Am actively creating a react native app for my college studies ! In that am using external api as data source. The problem am facing is that sometimes am getting data in single object and sometimes its in array format. How to handle this in react native perspective ?

As am maping jsx considering it as array but when i get object it throws error

My data example:

const data = {         // this is example of single object 
   entry: {
      key: "0",
      value: "Patrik"
   }
}

const data = {         // this is example of array
   entry: [
   {
      key: "0",
      value: "Patrik"
   },
    {
      key: "1",
      value: "John"
   }],
}

So this is how i get data from external api, and now my react native jsx code:

     { data.entry.map(o => {
               <View key={o.key}>
                      <View style={{ paddingLeft: 25 }}>
                            <Text style={{ fontWeight: 'bold' }}>{o.value}</Text>
                      </View>
                  </View>

                }) 
      }

So, when i get array, it works but when i get object this throws error ! Any help on this ?

Sagar Shakya · Accepted Answer · 2020-12-21 05:09:08Z

1

You should do Array.isArray(data.entry) to check if you have an array of object or a single object. And perform the logic based on that.

answered Dec 21, 2020 at 5:09

Sagar Shakya

6544 silver badges8 bronze badges

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

2 Comments

PatriciaD19 Over a year ago

So, if its object how to render jsx ?

Sagar Shakya Over a year ago

If its a single object, you can just do data.entry.value and get the value.

JustRaman · Accepted Answer · 2020-12-21 05:31:15Z

1

Convert Object to Array so you won't get error.

if(!Array.isArray(data.entry)){
  data = { entry: [data.entry] };
}

edited Dec 21, 2020 at 5:31

answered Dec 21, 2020 at 5:08

JustRaman

1,1719 silver badges12 bronze badges

3 Comments

Leri Gogsadze Over a year ago

[data] or [data.entry]?

PatriciaD19 Over a year ago

If so, how to render jsx ?

JustRaman Over a year ago

Updated the answer. it was my mistake. You don't need to change your jsx.

PhantomSpooks · Accepted Answer · 2020-12-21 05:19:41Z

0

Like the above comment says, you should use Array.isArray to check if the data is an array. If its an object something like this should work:

let element = null
if(Array.isArray(data.entry)){
  element = data.entry.map(o => {
     <View key={o.key}>
        <View style={{ paddingLeft: 25 }}>
          <Text style={{ fontWeight: 'bold' }}>{o.value}</Text>
        </View>
     </View>
   }) 
  }
  else{
    element = (
    <View key={data.entry.key}>
        <View style={{ paddingLeft: 25 }}>
          <Text style={{ fontWeight: 'bold' }}>{data.entry.value}</Text>
        </View>
    </View>
  )
}

answered Dec 21, 2020 at 5:19

PhantomSpooks

3,6202 gold badges10 silver badges16 bronze badges

Comments

Nooruddin Lakhani · Accepted Answer · 2020-12-21 05:40:46Z

0

This might help -- (Updated)

{
  const newData = []; // define empty array
  Array.isArray(data.entry) ? newData.concat(data.entry) : 
                              newData.push(data.entry);
    newData.entry.map((o) => {
      <View key={o.key}>
        <View style={{ paddingLeft: 25 }}>
          <Text style={{ fontWeight: "bold" }}>{o.value}</Text>
        </View>
      </View>;
    })
}

edited Dec 21, 2020 at 5:40

answered Dec 21, 2020 at 5:15

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

3 Comments

PatriciaD19 Over a year ago

I understand this, but is this is the real way to approach this ? As it extends the length of code right ?

Jayce444 Over a year ago

@PatriciaD19 It'd be better to set the value to map over first, so you don't have to copy paste all the JSX. e.g. dataToRender = Array.isArray(data.entry) ? data.entry : [data.entry];. Then just go ahead knowing it's an array data.entry.map... and you don't have to copy/paste JSX for both cases

Nooruddin Lakhani Over a year ago

@PatriciaD19 check updated code which reduces lines of code

Avinash · Accepted Answer · 2020-12-21 06:03:26Z

0

//jsx

const convertedData =  Object.values(Array.isArray(data.entry)? data.entry: [data.entry]);

Now you can iterate convertedData . But I will suggest instead of using map , please use Flatlist.
If you want to use map then please do null check for data.entry and return the jsx elements.

answered Dec 21, 2020 at 6:03

Avinash

1,1483 gold badges15 silver badges28 bronze badges

3 Comments

PatriciaD19 Over a year ago

Whats the advantages of using flatlist instead of map ?

Avinash Over a year ago

.Quick Rendering .good Performance .Header support .Footer support .Pull to refresh support .Separator support .Scroll loading support .ScrollToIndex support .Cross-Platform support .Configurable callbacks .Optional support for horizontal mode

PatriciaD19 Over a year ago

I believe there wont be any performance issue between using map and flat

Collectives™ on Stack Overflow

How to handle object and Array in react native?

5 Answers 5

2 Comments

3 Comments

Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related