How can I distinguish between the multiple lists returned by the Web API and store them in separate arrays?

My web API returns multiple lists, such as employersList and locationsList.

Here is the current code I am using:

  items = [];

  constructor(private http: HttpClient) {}

  getMember(){
    this.http.get('http://apirequest').toPromise().then(data =>{

      for(let key in data){
        if(data.hasOwnProperty(key))
        {
          this.items.push(data[key])
        }
      }
    })
  }

Currently, I am writing all the data to a single array. How can I store the data in separate arrays?

Below is an example of the data I receive from the API request:

{
  "employersList": [
    {
      "id": 2319259,
      "employerName": "Jack Star",
    },
    {
      "id": 4337496,
      "employerName": "John Star",
    }
  ],
  "locationsList": []
}

Answer №1

Here is a possible solution for your issue

  data = { companies: [], countries: [] };

  constructor(private http: HttpClient) {}

  fetchData(){
    this.http.get('http://apiendpoint').toPromise().then(response =>{
       const { companies, countries } = response;
       this.data.companies = companies;
       this.data.countries = countries;
    })
  }

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

How can I customize the font style for headers in Angular Material 2?

I am working on an Angular Material 2 application using angular 7. After consulting the typography documentation, I have set up the base typography as follows: $sc-typography-config: mat-typography-config( $font-family: '"Helvetica Neue", Helveti ...

Switching up the icons of Angular/PWA in Ionic 5 - here's how!

Is there a way to change the default icons from @angular/pwa using "ionic cordova resources" command? I have tried this but the icons still remain unchanged. Any suggestions on how to achieve this? ...

Enhancing the loading speed of hefty Angular components

The issue I encountered involved a large component that loads over 1000 data elements, populated by a service called only once. Initially, the service was being called each time the component initialized, which seemed to be causing performance problems. To ...

Route protection is ineffective when dealing with two observables simultaneously

After writing the route guard as shown below, I encountered an issue with the else statement that was not returning a result, even though it should have. Surprisingly, there were no errors either. this.hotelSettingsService.get().pipe(map(res => { ...

Accessing the .env file to configure a NestJS application using TypeORM and a custom provider

I am still learning my way around nestJS and I am currently trying to configure .env for an existing application but encountering some issues. Within my custom provider for the appModule, it looks like this: @Module({ providers: [ AbcService, ...

Utilize Angular 4 to effectively update objects within Firebase Cloud Firestore

Hey there! I've been working with firebase and angular 4 on this new thing called firestore. I've been trying to update one of the documents, but I keep encountering this error. https://i.sstatic.net/638E1.png Here's my component: https:/ ...

Discover a more efficient method for expanding multiple interfaces

Hey there, I'm having some trouble with TypeScript and generics. Is there a better way to structure the following code for optimal cleanliness and efficiency? export interface Fruit { colour: string; age: number; edible: boolean; } export inte ...

transformed an Angular 2 web application into a sleek and functional mobile application

I am looking to convert my basic angular2 web application into a mobile app using cordova. Is there a way to achieve this without relying on Ionic or nativeScript? ...

Encountered an error: Template parsing issues arose when integrating kendo-angular-scheduler into the app.module

I integrated the kendo-angular-scheduler into my Angular app using the following command: ng add @progress/kendo-angular-scheduler Although I have installed this module, I have not utilized it in my project yet. After compiling the code, an error message ...

Is there a way to modify a component's CSS by using a global CSS class name in Angular?

We have implemented a system where a class on the html element determines whether the user is in dark or light mode of the application. <html class="dark-mode"></html> This class is dynamically added using Renderer2 in a service that detects ...

Prisma Date and Time Formatting Challenge

Exploring Nest Js and prisma led me to the need to store DateTime data in my database based on my timezone preferences. joining DateTime @db.Timestamptz(5) ` I found that using @db.Timestamptz resolved my timezone storage issue, but upon retriev ...

Utilizing the input element to modify the font color of the title upon clicking the button

I've been honing my skills in Angular and facing an issue with altering the font color of a variable called title. I'm struggling to figure it out. Take a look at the code snippet from tools.component.ts: [...] title: string = 'Add note ...

How to programmatically close an Angular 5 Modal

In my current project, I am working with Angular 5. One of the functionalities I have implemented is a modal window. The HTML structure for this modal looks like this: <div class="add-popup modal fade" #noteModal id="noteModal" tabindex="-1" role="dia ...

Expanding and shrinking div elements in Angular with sliding effects on other divs

Hello, I am just starting with angular and angular animations, and I have encountered a problem. Here is the html code that I am working with: <div class="main"> <div class="left" *ngIf="showLeftSide" [@slideInOutLeft]></div> <di ...

Styling Angular Material Forms: Customizing Input Backgrounds and Button Heights

I'm currently working on a simple email input form with a submit button. Here are the adjustments I want to make: Set the background of the email input to white Ensure that the submit button matches the height of the input field However, my attempts ...

typescript tips for incorporating nested types in inheritance

I currently have a specific data structure. type Deposit { num1: number; num2: number; } type Nice { num: number; deposit: Deposit; } As of now, I am using the Nice type, but I wish to enhance it by adding more fields to its deposit. Ultima ...

Discover the method of extracting information from an object and utilizing it to populate a linechart component

Object Name: Upon calling this.state.lineChartData, an object is returned (refer to the image attached). The structure of the data object is as follows: data: (5) [{…}, {…}, {…}, {…}, {…}, datasets: Array(0), labels: Array(0)] In the image p ...

Adding child arrays to a parent array in Angular 8 using push method

Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...

The function is receiving an empty array of objects

This code is for an Ionic app written in typescript: let fileNames: any[] = []; fileNames = this.getFileNames("wildlife"); console.log("file names:", fileNames); this.displayFiles(fileNames); The output shows a strange result, as even though there ar ...

Tips on transferring data to a parent component without dismissing the Angular Material dialog when a button is clicked

Is there a way to transfer data from a popup (angular material dialog) to its parent component when a button is clicked, all without closing the popup window? I'm stumped on how to accomplish this task. If anyone knows a solution, please lend me a ha ...