Ways to retrieve specific Observable elements?

Question

Ways to retrieve specific Observable elements?

Having a function like this:

getCategories(): Observable<any>
        {
         return this.category.find({where: {clientId: this.userApi.getCurrentId()}})
        };

The return type of this.category.find is Observable<T[]>.

When I invoke getCategories() using the following code:

const source = this.categoryService.getCategories();
const example = source.map(Categ=> Categ.id);
const subscribe = example.subscribe(val => console.log(val));

The result shows that Categ.id is undefined

If I directly run:

const source = this.categoryService.getCategories();
const subscribe = source.subscribe(val => console.log(val));

The output is shown here: https://i.sstatic.net/uROvf.png

I suspect there might be a typing issue somewhere, but I can't pinpoint it.

Any suggestions?

Thanks and Best Regards,

angular typescript observable

Answer 1

Answer №1

The issue lies in the data types being used. It is recommended to avoid using "any" as it doesn't take advantage of type validation.

Upon reviewing the logs, it appears that the source variable contains an array, but your code source.map(Categ=> Categ.id) interprets it as individual objects.

A better approach would be to define an interface for Categ, like this:

interface Categ {
    id: string;
    categoryName: string;
    clientId: string;
}

You can then utilize this interface in the service method as follows:

getCategories(): Observable<Categ[]> {
     return this.category.find({where: {clientId: this.userApi.getCurrentId()}});
};

This way, the compiler can help identify any issues and assist in correcting the code later on:

const source = this.categoryService.getCategories();
const example = source.map(categ => categ.map(c => c.id));
const subscribe = example.subscribe(val => console.log(val));

Answer 2

The issue lies in the data types being used. It is recommended to avoid using "any" as it doesn't take advantage of type validation.

Upon reviewing the logs, it appears that the source variable contains an array, but your code source.map(Categ=> Categ.id) interprets it as individual objects.

A better approach would be to define an interface for Categ, like this:

interface Categ {
    id: string;
    categoryName: string;
    clientId: string;
}

You can then utilize this interface in the service method as follows:

getCategories(): Observable<Categ[]> {
     return this.category.find({where: {clientId: this.userApi.getCurrentId()}});
};

This way, the compiler can help identify any issues and assist in correcting the code later on:

const source = this.categoryService.getCategories();
const example = source.map(categ => categ.map(c => c.id));
const subscribe = example.subscribe(val => console.log(val));

Answer 3

Answer №2

When the getCategories() function is called, it returns an array of categories instead of just one category, as shown in the console log of your subscription.

You might want to experiment with this approach:

const example = source.map((categories) => categories.map((category) => {return category.id}));

Answer 4

When the getCategories() function is called, it returns an array of categories instead of just one category, as shown in the console log of your subscription.

You might want to experiment with this approach:

const example = source.map((categories) => categories.map((category) => {return category.id}));

Answer 5

Answer №3

Do you believe writing an interface is excessive? I am currently using a .find() method from a SDK which returns Observable<T[]>. This has led me to create a service to retrieve data from the back-end and then call this service from a component. However, I am questioning whether this service is necessary as it solely revolves around the getCategories() method. In essence, I already have a function that provides me with categories, but I decided to implement a new one within the service. The question remains - is developing an interface too much in this scenario? What are your thoughts?

Answer 6

Do you believe writing an interface is excessive? I am currently using a .find() method from a SDK which returns Observable<T[]>. This has led me to create a service to retrieve data from the back-end and then call this service from a component. However, I am questioning whether this service is necessary as it solely revolves around the getCategories() method. In essence, I already have a function that provides me with categories, but I decided to implement a new one within the service. The question remains - is developing an interface too much in this scenario? What are your thoughts?

Ways to retrieve specific Observable elements?

Answer №1

Answer №2

Answer №3

Similar questions

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

Lack of intellisense support for .ts files in Visual Studio Code

The program is throwing an error stating that the property 'user' is not found on the data type 'DefaultRootState'

VS Code is throwing an Error TS7013, while Typescript remains unfazed

Is the child constantly updating due to a function call?

Accessing node_modules in TypeScript within an Asp.Net Core application

Tips for reusing a Jest mock for react-router's useHistory

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

Encountering TS 2694 Error while running the ng serve command

Exploring Typescript and Clean Architecture with an In-Memory Database/Repository

type Y does not contain property X

Employing async/await for efficient data retrieval

Can the validity of a Control's property be adjusted?

Setting the height of CKEditor 5: A comprehensive guide

Exploring the Potential of Jest in Combination with Angular 13 and Clarity Framework

Unable to trigger click or keyup event

Achieving success with a straightforward ng2 webpack starter pack

Leverage a unified custom theme across both iOS and Android platforms in Ionic 3

Exploring ways to incorporate conditional imports without the need for personalized webpack settings!

Standardized identification code