CODEWITHSUNDEEP
javascriptarraysreactjsreact-native
PatriciaD19
PatriciaD19

Reputation: 81

How to handle object and Array in react native?

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 ?

Upvotes: 6

Views: 1976

Answers (5)

Avinash
Avinash

Reputation: 1128

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

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

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

Upvotes: 0

JustRaman
JustRaman

Reputation: 1161

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

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

Upvotes: 1

PhantomSpooks
PhantomSpooks

Reputation: 3570

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

Upvotes: 0

Sagar Shakya
Sagar Shakya

Reputation: 654

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.

Upvotes: 1

Related Questions