Display nested Json array fetched data React native

Question

So i'm new to react native and i'm trying to display nested elements of a Json fetched data, but i can't figure out how to do it. After using react hooks in the fetch api:

export default function MedProfilScreen({ route }) {
  //const {id,name,specialite,work}=route.params;
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("http:......")
      .then(response => response.json())
      .then(res => {
        setData(
          res);
        console.log(res);
      })
      .done();
  },[]);
}

i got this reponse:

Array [
  Object {
    "code": "12459552",
    "id": 7,
    "name": "Dr xavier vilan",
    "speciality": "Cardio",
  },
  Object {
    "education": Array [
      Object {
        "date_debut": "2020-02-07",
        "date_end": "2020-02-06",
        "diploma": "asmaa",
        "school": "asmaa",
        "city": "vullez",
      },
      ]}
]

so i want to display for example: name: Dr xavier.. diploma: asmaa

return(
<View>  name: Dr xavier.. diploma: asmaa            </View>
)

anyone have an idea how to do it please.thank you

Tim · Accepted Answer · 2020-03-27 12:55:15Z

1

I don't know it this is what you are looking for, but I'll give it a try:

Code:

const renderText = () => {
    // as soon as we received the data, we will display it
    if (data.length > 0){
      return (
         <Text> name: {data[0].name} diploma: {data[1].education[0].diploma}</Text>
      )
    }
}
return (
  <View>
     {renderText()}
  </View>
);

Output:

Demo:

https://snack.expo.io/rkbsDdoU8

edited Mar 27, 2020 at 12:55

answered Mar 27, 2020 at 12:32

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aymen Aymen Over a year ago

Yes this is what i need but i just get typo error: data[0].name is not an object

Tim Over a year ago

@AymenAymen I've updated my answer and the link to the demo

SDushan · Accepted Answer · 2020-03-27 12:33:25Z

1

Since you already saved your response inside data your data should like this,

data = [
  {
    code: "12459552",
    id: 7,
    name: "Dr xavier vilan",
    speciality: "Cardio"
  },
  {
    education: [
      {
        date_debut: "2020-02-07",
        date_end: "2020-02-06",
        diploma: "asmaa",
        school: "asmaa",
        city: "vullez"
      }
    ]
  }
]

Now you can access name & diploma as below,

name: data[0].name
diploma: data[1].education[0].diploma

Hope this helps you. Feel free for doubts

answered Mar 27, 2020 at 12:33

SDushan

4,6512 gold badges20 silver badges38 bronze badges

1 Comment

Aymen Aymen Over a year ago

thank you for your reply, Tim's answer above fixed it!

Uladzislau Ulasenka · Accepted Answer · 2020-03-27 12:06:22Z

0

try this:

return (
   <View>{JSON.stringify(data, null, 2)}</View>
)

answered Mar 27, 2020 at 12:06

Uladzislau Ulasenka

5825 silver badges14 bronze badges

1 Comment

Aymen Aymen Over a year ago

it just displayed the consol log of res on my app screen

joy08 · Accepted Answer · 2020-03-27 12:55:59Z

0

Try this referring to the items that you want

return(
     <View>  
          <Text> name: {data[0].name} diploma: {data[1].education[0].diploma}         
           </Text>
     </View>
)

answered Mar 27, 2020 at 12:55

joy08

9,6729 gold badges43 silver badges81 bronze badges

1 Comment

Aymen Aymen Over a year ago

thank you for your reply, Tim's answer above fixed it!

Collectives™ on Stack Overflow

Display nested Json array fetched data React native

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related