I want to design the above attached screen shot and I am getting a response in this format,
"data": {
"personaldata": [
{
"name": "suresh",
"time": [
{
"start": 12: 00,
"end": 16: 00
},
]
},
]
}
I want to show the data as shown in the screen shot, please let me know how can I achieve this
if the data is a lot like more than a thousand use flatlist because it will only render a few data.
<Flatlist
data={data.personaldata}
renderItem={({item})=>{
return(
<View style={{flexDirection:'row',justifyContent:'space-beetwen',paddingHorizontal:20}}>
<Text>{item.name}</Text>
<View>
{item.time.map((time)=>{
return (
<Text>{time.start}-{time.end}</Text>
)
})}
<View>
</View>
)
}}
/>
You can use Map function for your use. You can map over the data and get corresponding values and display as text. A basic implementation for same is as follows:
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
}}>
{data.personaldata.map(item => {
// uncomment below line to see what item is
// console.log(item);
return (
<>
<Text>{item.name}</Text>
{item.time.map(item => {
return (
<Text>
{item.start} {item.end}
</Text>
);
})}
</>
);
})}
</View>
Here I have applied map over data.personalData which gave me data for each user/entity and then again apply map over item.time which gives start and end time for each index.