Using Angular to map an observable<t>

Question

Using Angular to map an observable<t>

I'm currently working on a function that makes an API call and receives an array of objects as the response. My goal is to map this response to an observable of type Business, but I'm unsure about the correct mapping process within the getBusiness function.

Here is a sample response:

[
  {
    Id: 2,
    Name: "Joe"
  }
]

export interface Business {
    id: string;
    name: string;
}

getBusiness(): Observable<Business[]> {

        const url = "";

        return this.http.get(url, this.httpOptions)
        .pipe(
          map((data: Business[]) => data as Business[] )
        )
      }

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss'],
})
export class Component implements OnInit {

this.apiService.getBusiness() {
      .subscribe((res: Business[]) => console.log(res))
}

angular typescript rxjs observable

Answer 1

Answer №1

Implementing camelCase Conversion for API Response Objects

map((data: Business[]) => data.map(business => ({ id: business.Id, name: business.Name })) )

If you have control over the API, consider configuring it to return camelCase formatted properties to avoid extra processing. If not, a function can be created to convert property names to camelCase.

// Function to lowercase first letter
const firstLetterLower = val => val[0].toLowerCase() + val.substring(1);

// Function to convert object properties to camelCase
const camelcase = obj => Object.keys(obj).reduce((result, key) => {
  result[firstLetterLower(key)] = obj[key];
  return result;
}, {});

console.log(camelcase({
  Id: 2,
  Name: "Joe"
}));

Then you can utilize the function like this:

map((data: Business[]) => data.map(business => camelcase(business))

Answer 2

Implementing camelCase Conversion for API Response Objects

map((data: Business[]) => data.map(business => ({ id: business.Id, name: business.Name })) )

If you have control over the API, consider configuring it to return camelCase formatted properties to avoid extra processing. If not, a function can be created to convert property names to camelCase.

// Function to lowercase first letter
const firstLetterLower = val => val[0].toLowerCase() + val.substring(1);

// Function to convert object properties to camelCase
const camelcase = obj => Object.keys(obj).reduce((result, key) => {
  result[firstLetterLower(key)] = obj[key];
  return result;
}, {});

console.log(camelcase({
  Id: 2,
  Name: "Joe"
}));

Then you can utilize the function like this:

map((data: Business[]) => data.map(business => camelcase(business))

Answer 3

Answer №2

In my opinion, casting at the service is unnecessary.

Can you explain why const url = "";?

Service - Double-check the accuracy of the URL

getBusiness() {
    return this.http.get(url, this.httpOptions);
}

Component

ngOnInit() {
    this.apiService.getBusiness().subscribe(
     (res: Business[]) => console.log(res)
    );    
}

If there is a more efficient way to handle this task (even if it may be excessive)

Consider exploring NgRx/Store

Answer 4

In my opinion, casting at the service is unnecessary.

Can you explain why const url = "";?

Service - Double-check the accuracy of the URL

getBusiness() {
    return this.http.get(url, this.httpOptions);
}

Component

ngOnInit() {
    this.apiService.getBusiness().subscribe(
     (res: Business[]) => console.log(res)
    );    
}

If there is a more efficient way to handle this task (even if it may be excessive)

Consider exploring NgRx/Store

Answer 5

Answer №3

When communicating with the httpclient, you can handle responses like this:

return this.http.get<Business[]>(url, this.httpOptions)

It's as simple as that. This approach simply provides type information to the compiler without altering the response itself. If you need to change the structure of the response by renaming properties, then manual mapping or other methods will be required.

Answer 6

When communicating with the httpclient, you can handle responses like this:

return this.http.get<Business[]>(url, this.httpOptions)

It's as simple as that. This approach simply provides type information to the compiler without altering the response itself. If you need to change the structure of the response by renaming properties, then manual mapping or other methods will be required.

Using Angular to map an observable<t>

Answer №1

Answer №2

Answer №3

Similar questions

To activate the ion-toggle, simply click on the ion-label

Error: User authentication failed: username: `name` field is mandatory

Attach [!hidden] to a dropdown menu choice using Angular 2

Leveraging a service within the constructor of an Angular model

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

What are the solutions for resolving 'undefined' errors while working with TypeScript Interfaces?

Struggling to create an Extension Method for Map<TKey, TValue[]> in TypeScript

I am facing difficulty in using Angular's ngIF directive with my object property for toggling visibility based on a condition

Angular is throwing an error message stating that it cannot find a differ that supports an object of type 'object'. NgFor only supports binding to iterables like Arrays

Exploring Angular: A Guide to Localisation and JSON

Having trouble entering more than one character in an input field for a nested FormArray within a Reactive Form

What steps can I take to ensure the footer remains fixed at the bottom of the webpage?

The parameter type 'Function' cannot be assigned to the parameter type 'ComponentType<never>'

Tips for implementing code in React to toggle the visibility of pages on click

Adapt button functionality according to selected dropdown value in Angular

Issue with Angular 7: "Unspecified name attribute causing control not found"

Guide on how to determine a true or false outcome post an HTTP request within an angularJS function

Is it secure to transmit Tenant ID's as GET parameters to the API in a Multi-Tenant database environment?

Unleash the power of a module by exposing it to the global Window object using the dynamic

Encountering a compilation error when implementing ActionReducerMap in combination with StoreModule.forFeature