How to iterate over an array of objects in response data of a POST API in angular?

Question

Suppose I have a response body of an POST API in angular and its an array of objects it goes like this :

79: {customerId: '61c1b85fa7b16079fe7b5b64', title: 'Mr', phoneNumber: Array(0), jobProfile: 'GOLD', designation: 'Uuuuuuuuuuuu', …}
80: {customerId: '61c1b904a7b16079fe7b5b65', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Player', …}
81: {customerId: '61c1b94aa7b16079fe7b5b66', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Boss', …}
82: {customerId: '61c1b987a7b16079fe7b5b67', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Vvvjkb ', …}
83: {customerId: '61c1bb4ca7b16079fe7b5b68', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Player', …}
84: {customerId: '61c1bbd3a7b16079fe7b5b69', title: 'Mrs', phoneNumber: Array(0), jobProfile: 'GOLD', designation: 'Player', …}
85: {customerId: '61c1bd0ca7b16079fe7b5b6a', title: 'Mr', phoneNumber: Array(0), jobProfile: 'GOLD', designation: 'Player', …}
86: {customerId: '61c1bd4ba7b16079fe7b5b6b', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'CEO', …}
87: {customerId: '61c1bf34a7b16079fe7b5b6c', title: 'Mr', phoneNumber: Array(0), jobProfile: 'GOLD', designation: 'HELLO', …}
88: {customerId: '61c1bf79a7b16079fe7b5b6d', title: 'Mrs', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Vvvvvvvvvv', …}
89: {customerId: '61c1c2b2a7b16079fe7b5b6e', title: 'Mr', phoneNumber: Array(0), jobProfile: 'DIAMOND', designation: 'Hiiii', …}
90: {customerId: '61c1c8c7a7b16079fe7b5b6f', title: 'Mr', phoneNumber: Array(0), jobProfile: 'GOLD', designation: 'CEO', …}

This is the array and it has 1000 something entries , So if I want to iterate over this response body and I want to match a particular customerId so that I can save the customerId in local storage and then get the details of a particular row . How can I do that in angular??

EDIT!! **This is my Code Can you help me please here APP is an interface of which type of data I need in my API **


public getSeacrhCustomer(
 aadharId: string,
 emails:  string ,
 pan: string,
 phoneNumber: string
 ){
const postData : App = {
aadharId: aadharId,
emails: emails,
pan: pan,
phoneNumber: phoneNumber,
address: '',
city: '',
country: '',
customerId: '',
dateOfBirth: '',
designation: '',
firstName: '',
jobProfile: '',
lastName: '',
middleName: '',
monthlySalary: '',
passbooks: '',
pinCode: '',
state: '',
title: ''
}
{
return this.http.post('http://localhost:9900/api/v1/customer/search',postData
)
.subscribe(responseData=>
{
const specificCustomer= responseData.find((el: { phoneNumber: string | null; }) => el.phoneNumber=== this.phoneId);

  if (specificCustomer) {
    var specificCustomerId =   localStorage.set('customer', JSON.stringify(specificCustomer.customerId));
  }
console.log("Search Customer called from Existing Component!!")
console.log(responseData);
console.log(localStorage.getItem("values"))
console.log(this.phoneId)

});  
}

}

Here phoneNumber is coming in API response and I want to check whether it is equal to the phoneId or not if it is equal then I will save the respective customerId connected with that phone number in local storage

Here .find() method is giving an error Property 'find' does not exist on type 'Object'.

Does this answer your question? [How to loop through an array containing objects and access their properties](https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-properties) — Liam, Jan 19 '22 at 13:06
[There’s work to be done, whether it is homework or an assigned task , the person to whom it was assigned is expected to complete it. Even if it seems the task is too hard or there isn’t a clear starting point, an effort should be made.](https://idownvotedbecau.se/noattempt/) — Liam, Jan 19 '22 at 13:06

Adnan Khalid Shah · Answer 1 · 2022-01-20T15:08:34.177

0

This is pretty basic thing in angular.

To find a specific ID in the API response, simply save the response in a variable if used later, or create a local variable in the API response and then you can extract the object containing the ID.

Here's a sample piece of code for this:

this.httpService.get('API_CAll_ROUTE_').subscribe(
   response => {
      const specificCustomer= response.find(el => el.customerId=== '61c1b85fa7b16079fe7b5b64');
      if (specificCustomer) {
         localStorage.set('customer', JSON.stringify(specificCustomer.customerId));
      }
   }
);

When you get it from localStorage, you can simply call JSON.parse to get the object.

Remember that the response object may not be an array, so you'll have to add the above code in the array containing attribute.

edited Jan 20 '22 at 15:08

answered Jan 19 '22 at 16:25

Adnan Khalid Shah

106
7

Tried this piece of code but it says ( Property 'find' does not exist on type 'Object'. ) .subscribe(responseData=> { const specificCustomer= responseData.find(el => el.phoneNumber=== this.phoneId); if (specificCustomer) { var specificCustomerId = localStorage.set('customer', JSON.stringify(specificCustomer.customerId)); } console.log(responseData); console.log("Phone ID !!" + this.phoneId); }); } This is my code I want to check the customer through phoneId and then I will save the customerId that matches my phoneId – Kishkin Jan 20 '22 at 12:13
response is an object, so you'll have to check which element in the object is the array you want to iterate upon. find() should work on that – Adnan Khalid Shah Jan 20 '22 at 14:29

How to iterate over an array of objects in response data of a POST API in angular?

1 Answers1