Iterate Over JSON Object Obtained from Spring Boot Rest Application in Angular - json

Question

I am getting a JSON response and I want to display the contents obtained from this response on my HTML page using angular.
ngOnInit() {
this.http.get(this.url)
.subscribe(response =>{
this.users = response.json();
});
}
Above code returns an Object of JSON which cause an error if iterated using ngFor.
I have tried some answers available on StackOverflow regarding this problem but they cause compilation errors or give no results.
Here is JSON Object I'm getting
{
"_embedded" : {
"users" : [ {
"name" : "Ahmad",
"role" : "Admin",
"_links" : {
"self" : {
"href" : "http://localhost:8080/users/1"
},
"user" : {
"href" : "http://localhost:8080/users/1"
}
}
}, {
"name" : "Umar",
"role" : "User",
"_links" : {
"self" : {
"href" : "http://localhost:8080/users/2"
},
"user" : {
"href" : "http://localhost:8080/users/2"
}
}
}, {
"name" : "Ali",
"role" : "Admin",
"_links" : {
"self" : {
"href" : "http://localhost:8080/users/3"
},
"user" : {
"href" : "http://localhost:8080/users/3"
}
}
}, {
"name" : "Waqas",
"role" : "User",
"_links" : {
"self" : {
"href" : "http://localhost:8080/users/4"
},
"user" : {
"href" : "http://localhost:8080/users/4"
}
}
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:8080/users{?page,size,sort}",
"templated" : true
},
"profile" : {
"href" : "http://localhost:8080/profile/users"
},
"search" : {
"href" : "http://localhost:8080/users/search"
}
},
"page" : {
"size" : 20,
"totalElements" : 4,
"totalPages" : 1,
"number" : 0
}
}
EDIT: HTML code with ngFor
<ul class="list-group">
<li
*ngFor="let user of users"
class="list-group-item">
{{ user }}
</li>
I am learning angular at the moment so please give some explanation with the answer.

Answer 1

You need to modify this
this.users = response.json();
to
this.users=response.json()._embedded.users

Answer 2

You need to modify this
this.users = response.json();
to
this.users = response.json()['_embedded']['users'];