Information obtained from the visible is consistently indefinable

Question

Information obtained from the visible is consistently indefinable

I provide a service that returns observables of an array of objects

allItems: Item[] = [
    {
      id: "1",
      name: "item 1"
    },
    {
      id: "2",
      name: "item 2"
    },
    {
      id: "3",
      name: "item 3"
    },
    {
      id: "4",
      name: "item 4"
    }
  ];

function getItems {
 return of(allItems);
}

Component

allItems: Observable<Item[]>;
constructor(
    private itemService: ItemService
  ) {
    this.itemService
       .getItems()
       .pipe(first())
       .subscribe(() => {
        results => this.allItems == results;
      });

this.allItems is always undefined and it does not have any values in there. If I do console.log(results) I do get the values

angular typescript rxjs observable

Answer 1

Answer №1

It seems like you are looking to convert allFruits into an array instead of an Observable. Am I understanding that correctly? I've made some adjustments to the subscribe lambda function as well.

allFruits: Fruit[];
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(results => {
        this.allFruits == results;
      });

If you plan on using this service in combination with the async pipe, you can consider the following approach:

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.allFruits = this.fruitService
       .getFruits()
       .pipe(first());

You can then utilize allFruits along with the async pipe within your template.

Answer 2

It seems like you are looking to convert allFruits into an array instead of an Observable. Am I understanding that correctly? I've made some adjustments to the subscribe lambda function as well.

allFruits: Fruit[];
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(results => {
        this.allFruits == results;
      });

If you plan on using this service in combination with the async pipe, you can consider the following approach:

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.allFruits = this.fruitService
       .getFruits()
       .pipe(first());

You can then utilize allFruits along with the async pipe within your template.

Answer 3

Answer №2

Avoid using the equality operator ==, use the assignment operator = instead.

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

Answer 4

Avoid using the equality operator ==, use the assignment operator = instead.

allFruits: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.allFruits = results;
      });

Answer 5

Answer №3

fruitList: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.fruitList = results;
      });

However, the first() operator will return the first object which may not be an array. You can either adjust the type or remove the first() pipe.

Answer 6

fruitList: Observable<Fruit[]>;
constructor(
    private fruitService: FruitService
  ) {
    this.fruitService
       .getFruits()
       .pipe(first())
       .subscribe(() => {
        results => this.fruitList = results;
      });

However, the first() operator will return the first object which may not be an array. You can either adjust the type or remove the first() pipe.

Information obtained from the visible is consistently indefinable

Answer №1

Answer №2

Answer №3

Similar questions

Should I avoid incorporating jQuery into Angular applications?

How can I manually listen to Angular 2 events on a dependency injected instance?

In Angular, the data is displayed in the console but is not visible in the application

Guide to implementing Apollo GraphQL subscriptions in NextJS on the client-side

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Can you surpass the type declarations of a module at the local level?

Show the textbox automatically when the checkbox is selected, otherwise keep the textbox hidden

Using a string array in a JSON model - a simple guide

What is the best way to implement promise function in a JavaScript functional method such as forEach or reduce?

Attempting to establish a connection with MongoDB through Realm

Combining types with additional features

Exploring the potential of utilizing Pipes in Angular with dynamically loaded components

Stopping an ongoing API service call when an Angular route changes can be achieved by following these steps

Different Options to Explore Instead of Using @apollo/federation Library

Issue with Adding Class to Angular2 Material Tooltips

Using the parameter value as a property name in the return type of a function in TypeScript: a guide

Ways to display an icon in Angular 10 only when it is hovered over

Tips for implementing a search filter in a select dropdown menu using Angular

Is there a way to establish a "transient" category within a category to maintain code efficiency?

Sending Component Properties to Objects in Vue using TypeScript