How to get a record from an array result of API in React Native with condition?

Question

This is the result JSON file from API:

{
    "data": [
        {
            "recordid": "8888abc",
            "accountno": "00-00-00000-00007-00",
            "tag": "govid",
            "filename": "gov_id.png",
            "path": "C:\\MOBILEAPP\\governmentid/gov_id.png",
            "ext": ".png",
            "posted_dt": "12/11/2019 10:38:20 AM"
        },
        {
            "recordid": "8888abc",
            "accountno": "00-00-00000-00007-00",
            "tag": "compid",
            "filename": "compid.jpg",
            "path": "C:\\MOBILEAPP\\compid/cid.jpg",",
            "ext": ".jpg",
            "posted_dt": "12/11/2019 10:38:20 AM"
        }
    ],
    "error_message": "Successfully retrieved.",
    "is_success": true,
    "requested_on": "12/18/2019 2:14:27 PM"
}

I need to get the path where tag = 'govid' to be puth in a variable because it is used in the header of another API fetching.

 async getProfilePhotoPath(token) {
     //membid is recordid
    let membid = await AsyncStorage.getItem(MEMBER_ID);
    let resp2 = await fetch("https://api/files",
      {
        method: 'GET',
        headers: {
          "Authorization": "Bearer " + token,
          "MemberID": membid,
          'Content-Type': 'application/json;charset=UTF-8',
        },
      },
    )
      .then(resp2 => {
        let respImg = resp2.json();
        varImagePath = "should contain data.path where tag = 'govid'"
        console.log('This is respImg values',respImg)
        return respImg;
      })
      .catch(error => {
        alert('Error in resp2 imgpath!' + error);
      });
  } 

 async getProfilePhoto() {
    let token = await AsyncStorage.getItem(ACCESS_TOKEN);

    this.getProfilePhotoPath(token);

    let resp = await fetch("https://api/filepathtoimage", {
      headers: {
        "Authorization": "Bearer " + token,
        "ImagePath": varImagePath,
      }
    })
    let respBlob = await resp.blob();
    let reader = new FileReader()
    reader.readAsDataURL(respBlob)
    reader.onload = () => {
      this.setState({ imgsrc: reader.result })
    }
  }

console.log('This is respImg values',respImg) returns:

  This is respImg values
Promise {_40: 0, _65: 0, _55: null, _72: null}
_40: 1
_65: 1
_55:
data: Array(2)
0: {recordid: "8888abc", accountno: "00-00-00000-00007-00", tag: "govid", filename: "gov_id.png", path: "C:\\MOBILEAPP\\governmentid/gov_id.png", …}
1: {recordid: "8888abc", accountno: "00-00-00000-00007-00", tag: "compid", filename: "compid.jpg", path: "C:\\MOBILEAPP\\compid/cid.jpg", …}
length: 2
__proto__: Array(0)
error_message: "Successfully retrieved."
is_success: true
requested_on: "12/18/2019 3:10:32 PM"
__proto__: Object
_72: null
__proto__: Object

How to I put value on varImagePath (in this example should be 'C:\MOBILEAPP\governmentid/gov_id.png')?

Tuan Luong · Accepted Answer · 2019-12-18 07:47:17Z

1

resp2.json() return a promise.

.then(resp2 => resp2.json())
.then(jsonObject => {
  const data = jsonObject.data;
  const record = data.find(item => item.tag === 'govid');
  if (record) {
    varImagePath = record.path;
  }
})

answered Dec 18, 2019 at 7:47

Tuan Luong

4,2021 gold badge20 silver badges21 bronze badges

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

2 Comments

Webrider Over a year ago

This worked but I can't make varImagePath be read by getProfilePhoto().

Tuan Luong Over a year ago

you should await this function await this.getProfilePhotoPath(token);

StepUp · Accepted Answer · 2019-12-18 07:55:07Z

1

Just use filter:

let filterString = 'govid';
const result = arr.filter(f => f.tag == filterString);

An example:

let arr = [
      {
          "recordid": "8888abc",
          "accountno": "00-00-00000-00007-00",
          "tag": "govid",
          "filename": "gov_id.png",
          "path": "C:\\MOBILEAPP\\governmentid/gov_id.png",
          "ext": ".png",
          "posted_dt": "12/11/2019 10:38:20 AM"
      },
      {
          "recordid": "8888abc",
          "accountno": "00-00-00000-00007-00",
          "tag": "compid",
          "filename": "compid.jpg",
          "path": "C:\\MOBILEAPP\\compid/cid.jpg",
          "ext": ".jpg",
          "posted_dt": "12/11/2019 10:38:20 AM"
      }
  ]

  let filterString = 'govid';
  const result = arr.filter(f => f.tag == filterString);

  console.log(result);

UPDATE:

In your response:

then(resp2 => {
    let respImg = resp2.json();
    let arr = respImg.data;
    let filterString = 'govid';
    const result = arr.filter(f => f.tag == filterString);        
    return respImg;
  })

edited Dec 18, 2019 at 7:55

answered Dec 18, 2019 at 7:38

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

1 Comment

Webrider Over a year ago

I replaced it toconst varImagePath = arr.filter(f => f.tag =='govid'); and It alerted Error in resp2 imgpath! ReferenceError: arr is not defined

Collectives™ on Stack Overflow

How to get a record from an array result of API in React Native with condition?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related