How to convert hard coded array to Observable<T> in angular 6 [duplicate]

Question

How can you convert an array to an observable array in angular 6. I am trying to return an observable while having an array. I'm doing this so that instead of an HTTP request I can return hard-coded data.

I have the following interface:

export interface IProduct {
  productId: number;
  productName: string;
  productCode: string;
  releaseDate: string;
  description: string;
  price: number;
  starRating: number;
  imageUrl: string;
}

Then I have this service:

export class ProductService {

  products: IProduct[];

  getProducts(): Observable<IProduct[]> {
    this.products = [
      {
        'productId': 2,
        'productName': 'Black cat',
        'productCode': 'GDN-001',
        'releaseDate': 'March 18, 2018',
        'description': 'Can punch peoples faces.',
        'price': 32.00,
        'starRating': 5,
        'imageUrl': 'https://placekitten.com/400/420'
      },
      {
        'productId': 3,
        'productName': 'T Cat',
        'productCode': 'GDN-002',
        'releaseDate': 'March 18, 2018',
        'description': 'Can shoot guns.',
        'price': 32.00,
        'starRating': 2.2,
        'imageUrl': 'https://placekitten.com/400/420'
      }
    ];

    //paste here how to return the array to observable

  }
}

You can use of(this.products). It's imported from rxjs

user184994
– user184994

2018-11-01 12:09:17 +00:00
Commented Nov 1, 2018 at 12:09 — user184994
– user184994, Commented Nov 1, 2018 at 12:09

Sachila Ranawaka · Accepted Answer · 2018-11-01 12:10:43Z

9

use the of operator

import { of } from 'rxjs';


return of(this.products);

answered Nov 1, 2018 at 12:10

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SiddAjmera · Accepted Answer · 2018-11-01 12:09:56Z

3

Use from

import { from } 'rxjs'

export class ProductService {

  products: IProduct[];

  getProducts(): Observable < IProduct[] > {
    this.products = [{...}, {...}];
    return from(this.products);
  }
}

answered Nov 1, 2018 at 12:09

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Comments

SiddAjmera · Accepted Answer · 2018-11-01 12:21:00Z

2

If you're using Rxjs 5 or earlier:

You can just use

return Observable.of(this.products);

make sure to import,

import { Observable } from "rxjs";

edited Nov 1, 2018 at 12:21

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

answered Nov 1, 2018 at 12:09

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Artyom Amiryan · Accepted Answer · 2018-11-05 14:31:52Z

1

You can use of which will return Observable of argument that of has gotten. Import it from import { of } from 'rxjs';

return of(this.products);

edited Nov 5, 2018 at 14:31

answered Nov 1, 2018 at 12:10

Artyom Amiryan

2,9961 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to convert hard coded array to Observable<T> in angular 6 [duplicate]

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related