Exploring the _embedded section within a Json Response

Having difficulty accessing the _embedded property within Json in Angular. Wondering if it's even possible. The Json response, created using Spring-Data-Jpa, is structured like this:

{
"_embedded": {
    "reviews": [
        {
            "author": "Anonymous",
            "content": "This movie sucks",
            "upvotes": 0,
            "downvotes": 0,
            "_links": {
                "self": {
                    "href": "http://localhost:8080/api/reviews/1"
                },
                "review": {
                    "href": "http://localhost:8080/api/reviews/1"
                },
                "film": {
                    "href": "http://localhost:8080/api/reviews/1/film"
                }
            }
        }, ...
    ]
},
"_links": {
    "self": {
        "href": "http://localhost:8080/api/reviews{?page,size,sort}",
        "templated": true
    },
    "profile": {
        "href": "http://localhost:8080/api/profile/reviews"
    }
},
"page": {
    "size": 20,
    "totalElements": 6,
    "totalPages": 1,
    "number": 0
}

} I am trying to extract and process reviews nested within the embedded field from my Client app. However, I am encountering challenges accessing the _embedded property. The snippet of my Angular Service is as follows:

getEmbedded(): Observable<any> {
return this.http.get(ServerConfig.serverAddress + '/api/reviews');
}

Here is the component that utilizes the service:

export class ReviewListComponent implements OnInit {
embeddedReviewResource: any;

constructor(private reviewService: ReviewService) { }

ngOnInit() {

this.reviewService.getEmbedded().subscribe(data => {
  this.embeddedReviewResource = data;
});
}

I have attempted various methods to reference the _embedded property in my view:

*ngFor="let review of embeddedReviewResource.reviews

or

*ngFor="let review of embeddedReviewResource._embedded.reviews

or

*ngFor="let review of embeddedReviewResource.getEmbedded().reviews

or

*ngFor="let review of embeddedReviewResource._embeddedViews.reviews

Unfortunately, none of these approaches seem to work. How can I access the _embedded property within the Json File? You can find the complete source code on my GitHub.

Answer №1

   reviewsList = []; 

   this.reviewService.getEmbedded().subscribe(reviewsData => {
      this.reviewsList = reviewsData._embedded.reviews;
    });

output

   <div *ngFor="let reviewItem of reviewsList"> 
     {{ reviewItem.content }}
   </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading Angular 4 Material Tabs when a tab is selected

Can lazy loading be implemented with Angular Material Tabs? If not, I am looking for a solution to execute a method when switching tabs. ...

When intercepted, the HttpRequest is being canceled

Solution Needed for Request Cancellation Issue Encountering a problem with the usage of HttpInterceptor to include the Authorize header in all HTTP requests sent to AWS API Gateway. The issue arises as all these requests are getting cancelled when interce ...

Uncaught Error: Unable to access 'visit' property of null

Sharing this in case it helps someone else who encounters the same error, as the stack trace doesn't offer any clues on what might have caused the problem. ...

Arranging an array of objects in Angular based on the value inside each object

How can I retrieve objects by filtering the key value within the object? In the example below, I need to extract data only with session_id:23. data = [{ name: "First Name", session_id : "23", login: "date" }, { name: "Second Name", ...

Changing a global variable via an AJAX call

I seem to be facing a common issue that many others have encountered. Despite my understanding that global variables can be modified inside functions in Javascript, I am struggling with this concept in practice. var lastMessage = 0; function loadChat() { ...

python scraping: how to extract two nested elements

Hello, I am looking to extract information from the < del> and < ins> tags below. However, I haven't been able to find a solution yet. Does anyone have any ideas on how to scrape this data? This is my Python code: import requests import j ...

What are some ways to make autorun compatible with runInAction in mobx?

Currently delving into the world of mobx and runInAction, facing a challenge in comprehending why autorun fails to trigger my callback in this particular scenario: class ExampleClass { // constructor() { // this.exampleMethod(); // } ...

A step-by-step guide on how to access the version number in an Angular (v4+) application from the package

Currently, I am attempting to retrieve the version number of my Angular application from package.json where it is stored. Most resources recommend using require to load the JSON file like so: var pckg = require('../../package.json'); console.log ...

Ways to verify AJAX Response String when data format is specified as JSON

When using AJAX to retrieve JSON data from a webpage, it's essential to set the responseType to json. If the data processing is successful, a valid JSON string is returned, which works perfectly. However, if there's an error on the webpage, inst ...

Error encountered while waiting for Angular to finish loading in Protractor: ScriptTimeoutError - Task: Protractor.waitForAngular()

Yesterday went smoothly, but today after updating to pull all commits from svn, everything stopped working. Every time I run a test, I encounter this error: ScriptTimeoutError: script timeout And: From: Task: Protractor.waitForAngular() - Locator: By(c ...

Creating a dynamic 3D bar chart within an Angular 8 application is possible through the utilization of powerful visualization libraries such as d3

Currently, I am attempting to develop a 3D bar chart within an Angular 8 application. Despite consulting the documentation for d3.js, three.js, and plotly chart frameworks, I have been unable to find any sample code. I kindly request if anyone could share ...

Access your account using Google authentication within an Angular framework

My latest project involves creating an API that allows users to log in with Google by using the endpoint http://localhost:3001/api/v1/user/google. Here's how it works: A user clicks on the link http://localhost:3001/api/v1/user/google The endpoint h ...

Deconstruct the JSON object to extract values from both sides

When using volley to fetch API response, the data received is in the form of STATE_ID:STATE_NAME pairs (i.e. value:value pair). I need to extract and store both sides of the pair in separate Strings. These values are then intended to be placed in a spinner ...

Transmitting a base64 data URL through the Next.js API route has proven to be a challenge, but fortunately, other forms of

It's frustrating me to no end. I've successfully done this before without any problems, but now it just won't cooperate. Everything works fine when passing an empty array, a string, or a number. However, as soon as I include the data URL, t ...

Utilize jQuery/AJAX to extract a specific value from JSON data and transform it into a different value within the same

Hello everyone, I've been coding all day to try and solve this issue but my code doesn't seem to be working. Can anyone help me with this problem? I'm trying to convert selected JSON data into a different value. Let's take an example: ...

What is the best way to transform an array containing double sets of brackets into a single set of brackets?

Is there a way to change the format of this list [[" ", " ", " ", " ", " ", " ", " ", " ", " ", " "]] to look like [" ", " ", " &qu ...

Generating a list from JSON entities

I am tasked with creating a specific list format using values from a JSON object. <li> <span class="room">A20</span> <span class="dropin">3</span> <span class="appoint">1</span> <span class="del ...

The most recent version of Angular featuring the powerful Angular-anim

Currently, I am in the process of revamping an application that was initially developed using a combination of jquery, bootstrap, and kendo ui. Moving forward, the application will transition to an angular (2/4) and kendo framework. In the previous setup, ...

No output when using Typescript 2.0

Recently, I've been working on a project in VS 2015 update 3 and just integrated Typescript 2.0. Initially, I encountered a lot of errors and had to go through a trial and error process to resolve them. Now, all the errors have been fixed but I' ...

Is the Angular 16 button being properly interpreted?

I recently added a primeicon/primeng button in my Angular 16 project using the following code snippet: <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt)">&l ...