How to extract key and value from json in fetch method in React Native?

Question

I'm new in React Native. I would like to extract a value from json with fetch to do a simple test to begin. But I don't understand, how to select a particular key from Json. Always, I have undefined return. I tried to modify my code with this post but it doesn't work. I tried to parse before but he didn't want because it's already an object.

This is my code:

checkLogin = () => {

    const { name } = this.state;
    const { surname } = this.state;

    fetch('https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=' + name + '%20' + surname, {
        method: 'GET',
    }).then((response) => response.json())
        .then((responseJson) => {
            if (responseJson.ind == 'Individu non trouv\u00e9 !') {
                alert("Id incorrect")
            }
            else {
                alert("Id correct");
            }
            alert(JSON.stringify(responseJson.ind))

        }).catch((error) => {
            console.error(error);
        });

}

This is my JSON format:

[{"iuf":"1366701","ind":"LEBRUN L\u00e9o (2000) H FRA - CN BEAUPREAU","sex":"#1e90ff","clb":"CN BEAUPREAU"}]

I know my request work because when I run this code alert(JSON.stringify(responseJson)).It return the entire json. So I don't know, how to resolve the undefined return.

Regards

Quentin Grisel · Accepted Answer · 2021-02-09T09:48:12.013

Your json is an array, you either need to loop through it if there is multiple items inside, or just use responseJson[0] to read it. So if you want to read your json, your code would look like this :

const checkLogin = () => {
    const { name } = this.state;
    const { surname } = this.state;

    fetch(
      "https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=" +
        name +
        "%20" +
        surname,
      {
        method: "GET"
      }
    )
      .then(response => response.json())
      .then(responseJson => {
        // Since you have only one object inside your json, you can read the first item with 'responseJson[0]'.
        if (responseJson[0].ind == "Individu non trouv\u00e9 !") {
          alert("Id incorrect");
        } else {
          alert("Id correct");
        }
        alert(JSON.stringify(responseJson[0].ind));

        // If you have multiple elements inside your responseJson, 
        // then here is a loop example :

        // responseJson.forEach(item => {
        //   console.log('item ind = ', item.ind);
        // });
      })
      .catch(error => {
        console.error(error);
      });
  };

Thank's for your answer. Ok, so it's not possible to extract the value of "ind" from Json. I need to do a loop but each time, I have an only one object so how I can read the value of "ind" for exemple. For the loop, data between the brace is just one value, right? I don't understand why `responseJson[0]` will work? I have already the same return with just `responseJson` . — MathisPoirier, Feb 09 '21 at 08:22
@MathisPoirier Yes you're right. `responseJson[0]` will read the first item of your array. If you are sure there is only one then it is OK to do that. Else, you will have to do a loop. I edited my answer to give you an example ;) — Quentin Grisel, Feb 09 '21 at 09:50
Thank you so much!!! I hate me, the solution it's so simple. I tested so many code. Best regards — MathisPoirier, Feb 09 '21 at 17:12

score 0 · Answer 2 · answered Feb 09 '21 at 10:32

0

Use async await.

const checkLogin = async () => {
    const { name } = this.state;
    const { surname } = this.state;

    const request =  await fetch(
      "https://ffn.extranat.fr/webffn/_recherche.php?go=ind&idrch=" +
        name +
        "%20" +
        surname)
    const response = await request.json();
    console.log('result from server', response)
}

answered Feb 09 '21 at 10:32

Jasur Kurbanov

724
2
9
20

Thank you for your answers. It work with Quentin's solution but I keep your solution if I have some issue or for other same situations. Best regards. – MathisPoirier Feb 09 '21 at 17:17

How to extract key and value from json in fetch method in React Native?

2 Answers2