如何在本机反应中处理 object 和 Array？

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 ?

Answer 1

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

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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