Encountering a "undefined response" issue within an Angular

I am encountering an issue when trying to fetch data from a REST API. Upon logging the response, I am getting an undefined value. How can I resolve this? I have confirmed that the API is sending data by checking my network tab in the developer tool.

getProductList() : Observable<Product[]>{
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products),
      tap((response) => console.log("Response:"+response))
    );
   } 

interface GetResponse{
    _embedded:{
      products: Product[];
    }
}

JSON Data Format

Answer №1

Do you think you may need to retrieve Product information?

map(response => response._embedded.product)

and create an interface for it like this:

interface GetResponse{
    _embedded:{
      product: Product[];
    }
}

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

Are SCSS style sheets being properly included in ng-packagr packaging?

I've been working on developing an Angular component library, packaging the modules for easy NPM installation. However, I took the old-school approach instead of using the CLI like Angular 6 recommends. Despite that, my components function properly wh ...

Is SignalR affected by the CORS same-origin policy?

After enabling CORS in my .NET core app, regular http requests are functioning properly. However, I am encountering CORS issues with SignalR when running my Angular app. Any suggestions or solutions would be greatly appreciated. Thank you in advance. Cros ...

What is the reason that control flow analysis does not support the never type?

Here is the scenario I'm dealing with (utilizing strictNullChecks): function neverReturns(): never { throw new Error(); } const maybeString: string | null = Math.random() > 0.5 ? "hi" : null; if (!maybeString) { neverReturns(); // th ...

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

Tips for verifying the presence of an active session after closing the browser

Here is my situation: When a user logs into the app and then opens another browser window, they are already authenticated thanks to express-session, bypassing the login page. This pattern continues for subsequent browser windows. The issue I am facing no ...

Issue with accessing custom method in subclass in Typescript

Recently delving into TypeScript, I decided to subclass Error and add a new method called getCode() in my MyError class. export class MyError extends Error { public code: number; constructor(code: number, message?: string) { super(mes ...

Can an Angular 2 module export an interface?

While attempting to export an interface in a NgModule-declaration, I encountered an error message in my editor (Visual Studio Code) stating: [ts] 'MyInterface' only refers to a type, but is being used as a value here. Below is the code snippet c ...

Is there a way to eliminate duplicate elements from 2 arrays in Angular?

Imagine I have a scenario with two arrays: arr1 = ["Tom","Harry","Patrick"] arr2 = ["Miguel","Harry","Patrick","Felipe","Mario","Tom"] Is it possible to eliminate the duplicate elements in these arrays? The desired output would be: arr2 = ["Miguel"," ...

Using Angular 4 with Firebase to display nested objects within an object

My Firebase data: { "hotel" : { "-Kjgyamcup6ULm0Awa-1" : { "complete" : "true", "images" : { "-Kjgyb6A2gRiDhwaWx-V" : { "name" : "2.jpg", "url" : "https://firebasestorage.googleapi ...

Custom fields can be included in the `package.json` file during the build process in an Angular application

My Angular application is up and running smoothly, with a handful of dependencies listed in its Package.json file: { "name": "angular-app", "version": "1.0.0", "scripts": { "ng": "ng ...

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

Here is the initial array object that I have: const data = [ { "order_id":"ORDCUTHIUJ", "branch_code":"MVPA", "total_amt":199500, "product_details":[ { ...

Ways to initiate SVG animations using Angular Component functions?

I am currently working on a project where I want to incorporate an animation that reflects the sorting process of an array of numbers. However, despite successfully sorting the numbers in the array, I am facing challenges with triggering the animations. I ...

Update the input value with the selected option from the dropdown menu in Angular

How can I dynamically set the value of an input field based on the selection from a dropdown menu in Angular using Reactive Forms? Below is my HTML code: <nb-card> <nb-card-header> Services </nb-card-header> <nb-card-body&g ...

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

This code snippet is from my app.component.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

Steps for deactivating a button based on the list's size

I am trying to implement a feature where the user can select only one tag. Once the user has added a tag to the list, I want the button to be disabled. My approach was to disable the button if the length of the list is greater than 0, but it doesn't s ...

Experiencing a typeerror with the Event attribute

I encountered an issue while trying to target an event. Here is what I attempted: public gotoPage(event: Event): void { const gettest = (event.target as HTMLElement)?.getAttribute('href'); if (href) { const testModule = "valu ...

Can we potentially extract shared components of a template?

As an example, I have numerous components designed for paged collections. Here is a template showcasing this: <div *ngIf="!isFormVisible"> <button class="btn" [ngClass]="{'btn-info': filtered, 'btn-default': !filtered}" (c ...

webpack - compile one TypeScript file separately (2 actions)

In summary... When my Vue files are combined with background.ts, webpack processes them to create bundled vue files along with background.js I'm unable to run the background.js script I expected background.js to only contain "console.log(' ...

A guide on instantly updating displayed flat/section list elements in React Native

I am in the process of creating a screen called ContactListScreen. The direct child of ContactListScreen is ContactItems, which is a sectionList responsible for rendering each individual ContactItem. However, I have encountered a problem where my ContactIt ...