Angular 13 implementation of a double-loop structure for fetching data from an API

Question

Angular 13 implementation of a double-loop structure for fetching data from an API

I'm facing an issue with retrieving specific data fields label and svm from a JSON file. The desired fields are nested inside PORTFOLIO > REGROUPEMENT > ELEMENT.

You can access the JSON file here.

img(1)

I've attempted to display the data using the Google Chrome console.

getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((res: any) => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        console.log("Test => " + res.REGROUPEMENT[0].ELEMENT[0]);
   }
        
    });
  }

Encountered error message:

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading '0')

img(2)

Struggling with data retrieval in a nested loop for LABEL and SVM.

portfolio.response.ts

export interface PortfolioResponse extends ApiResponse {
    PORTFOLIO: {
        VALPTF: number;
        DETAILS: {
            ACCOUNTLAB: string;
            ACCOUNTTYPE: string;
            LABEL: string;
            ACCOUNTPHYSICAL: string;
        };
        REGROUPEMENT: InstrumentRegroupement[];
    }
}
 
export interface InstrumentRegroupement {
    TYPEVALUE: number;
    ASSETCATLABEL: string;
    CURRENCY: string;
    AMOUNT: number;
    PERCENTAGE: number;
    ELEMENT: {
        LABEL: string;
        STOCK: string;
        SVM: number;
        COUPONNUMBER: number;
        ISINCODE: string;
        MARKETPLACE: string;
        ...
    }[];

...

EDIT

enter image description here

EDIT 2

TS

getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((res: any) => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        const data = res.PORTFOLIO.REGROUPEMENT.map((regroupment) => {
          return regroupment.ELEMENT.map((element) => ({
            label: element.LABEL,
            svm: element.SVM,
          }));
        }).flat();

   }
        
    });
  }

HTML

Your assistance is greatly appreciated.

angular typescript

Answer 1

Answer №1

If you are looking for a simple way to extract the label and svm fields from a hierarchy structure without dealing with the rest of the details, you can utilize the array.map() method to retrieve the specific keys at each level. Then, by using array.flat(), you can flatten the structure.

const information = data.PORTFOLIO.REGROUPEMENT.map((regroupment) => {
  return regroupment.ELEMENT.map((element) => ({
    labelName: element.LABEL,
    svmValue: element.SVM,
  }));
}).flat();

Answer 2

If you are looking for a simple way to extract the label and svm fields from a hierarchy structure without dealing with the rest of the details, you can utilize the array.map() method to retrieve the specific keys at each level. Then, by using array.flat(), you can flatten the structure.

const information = data.PORTFOLIO.REGROUPEMENT.map((regroupment) => {
  return regroupment.ELEMENT.map((element) => ({
    labelName: element.LABEL,
    svmValue: element.SVM,
  }));
}).flat();

Angular 13 implementation of a double-loop structure for fetching data from an API

Answer №1

Similar questions

Having trouble with VSCode/tsconfig path configurations, as the files are being fetched but still receiving a "Module not found" error in the editor

Excess whitespace found in string within mat-option

Verify user authentication

Retrieve information using an asynchronous pipeline once the screen is fully loaded

Encountering an issue with Angular build in Docker: [ERR_STREAM_DESTROYED] - Write function cannot be called after a stream

Does combineLatest detach this from an angular service function?

Is it feasible to incorporate an Angular environment variable into an SCSS file?

A React component featuring a nested map function should always include a "unique key" prop for each element

Unleash the power of drag-and-drop functionality with cdkDrop

Using mat-select along with formControl to establish the default value

Exploring Angular 2's Routing Features Across Different Cultures

Angular2 application encounters issue with target attribute being overlooked by Chrome

When I try to integrate Three.js into my React application, it mysteriously causes my root HTML element

Using Meteor methods in a Meteor and Ionic application: A guide

The intersection observer is unable to track multiple references simultaneously

Ways to eliminate additional data points on the x-axis in Highcharts

How can I replace any non-alphanumeric characters in a string with an underscore using JavaScript or TypeScript?

Playing a single media object from a group of multiple objects in Ionic

Exploring the correct navigation of page objects through Protractor using TypeScript

Adjust the color of an SVG icon depending on its 'liked' status