Im new to react-native and javascript so sorry for the messy code. Here Im trying to fetch data and display it as both keys and values.

export default Apps= () =>{
  const [data, setData] = useState({});
    console.log(data);

      var myHeaders = new Headers();
    myHeaders.append("sign", "//sign");
    myHeaders.append("token", "//token");
    
    var requestOptions = {
      method: 'GET',
      headers: myHeaders,
      redirect: 'follow'
    };
  
    useEffect(() => {
       fetch("//link", requestOptions)
        .then((response) => response.json())
        .then((json) => setData(json))
        .catch((error) => console.error(error))
    }, []);


    return  (
      <ScrollView>
      <View>
        <Text>Info</Text>
        {Object.entries(data.data).map(([key, val]) => (
        <Text key={key}>
       {key}: {val}
       </Text>
       ))}
       </View>
       </ScrollView>
    )
};

and the API object is

{
    "index": 0,
    "data": {
        "Id": 001,
        "name": "Carl",
        "timeCreated": 1607481520000,
        "groupName": "Alphax",
        "GroupId": 021,
        "loginId": "AlphaxCarl",
        "userName": "AlphaxCarl",
        "tasks": [
        {
            "id": 011,
            "name": "demolition"
        },
        {
            "id": 012,
            "name": "holding"
        },
        {
            "id": 013,
            "name": "stocking"
        },
        
    ],
        "roleId": 3,
        "roleName": "AlphaxLeader"
    }
}

but I want to display only

"Id": 001, "name": "Carl", "groupName": "Alphax", "loginId": "AlphaxCarl".

CodePudding user response：

You can display like:

return (
    <ScrollView>
      <View>
        <Text>Info</Text>
        {Object.entries(data.data).map(([key, val]) => {
          console.log("key", key, val);
          return <Text>{key   ": "   val}</Text>;
        })}
      </View>
    </ScrollView>
  );

Output is something like:

Info
Id: 1
name: Carl
timeCreated: 1607481520000
groupName: Alphax
GroupId: 21
loginId: AlphaxCarl