If userNames is correctly filled:

It should be

<p *ngFor="let user of userNames">{{user.USER_NAME}} </p>

instead of

<p>*ngFor="let user of userNames">{{user.USER_NAME}} </p>

Iam working in an ionic project with angualar framework, where my requirement is to get the backend json data through an api call and read the JSON data in an HTML page.

Below is the code i tried

Broker api call:

http://example.com/broker/get-user-names

backend Json data:

 [

  {
"USER_NAME": "John",
"USER_COUNTRY": "USA"
},


 {
"USER_NAME": "Smith",
"USER_COUNTRY": "Canada"
 },


{
 "USER_NAME": "Peter",
"USER_COUNTRY": "Russia"
 }

 ]

In .ts page: defined an array to hold the data from the API

userNames = [];

(created a serive.ts and defined the api url there) and the function written is as follows;

   getUserNames() {
    this.apiService.getUserNames(this.apiService.loggedInUser.value.id)
     .then(res => {
     this.userNames= JSON.parse(res); 
  },
  err => {
    alert(err);
  }
)
 }

now when trying to display the content in HTML page its not showing anything

<p *ngFor="let user of userNames">{{user.USER_NAME}} </p>

this is not working. iam not understanding where iam going wrong, Please help me on this.

Thank you.