CODEWITHSUNDEEP
react-nativejsx
hesam sameni
hesam sameni

Reputation: 151

How to render all items in a json object in react native?

I need to render all items in a json object in react native view but some of them are not in array and are not single items.

here is my api:

{
"meta": {
    "code": 200,
    "message": "success",
    "errors": []
},
"data": {
    "users": [
        {
            "userinfo": {
                "username": "hesamsameni",
                "fullname": "hesam sameni",
                "photo": "https://aaa.com/img/hesamsameni.png",
                "skills": {
                    "html": "HTML",
                    "css": "CSS",
                    "javascript": "JAVASCRIPT",
                    "react_native": "REACT NATIVE"
                }
            }
        }
    ]
}
}

here is my render method:

  render() {
return (
  <View>
    <FlatList
      data={this.state.dataSource}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({item}) => 
       <View>
         <Text>{item.fullname}</Text>
         <Image source={{uri: item.photo}}/>
         <Text>Skills:</Text>
         // I need to render all the skills here
       </View>
    }></FlatList>
   </View>

Upvotes: 2

Views: 1317

Answers (1)

Jebin Benny
Jebin Benny

Reputation: 951

Can you try this?

lapsList(datas) {
    const keys = Object.keys(datas); // Get all keys from dictionary

    return keys.map((key) => {
      return (
        <Text>{datas[key]}</Text>
      )
    })
}

render() {
return (
  <View>
    <FlatList
      data={this.state.dataSource}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({item}) => 
       <View>
         <Text>{item.fullname}</Text>
         <Image source={{uri: item.photo}}/>
         <Text>Skills:</Text>

         {this.lapsList(item.skills)}
         // I need to render all the skills here
       </View>
    }></FlatList>
   </View>

Upvotes: 2

Related Questions