Observable fromArray

Question

I currently have a problem with Angular2 and Observable object.

I have a Component who calls a Service : a real one linked to an api and a fake one.

The service linked to the API works well but when I use the fake one, I want to return an Array from Observable object but I have this error :"Observable_1.Observable.fromArray is not a function"

Here is my code :

Component :

this._raceService.list().subscribe(newRaces => { 

  this.races = newRaces;
});

Real Service :

list(){ return this._http.get('http://dev.backend.com/api.php', options).map(res => res.json()); }

Fake service :

list() { return Observable.fromArray([{ name: 'London' }]); }

Can you help me plz ?

Cheers

score 29 · Answer 1 · edited Apr 30 '17 at 20:27

29

should that be...

Rx.Observable.from(yourarray)

fromArray seems to be deprecated

edited Apr 30 '17 at 20:27

Sharky

6,154
3
39
72

answered Mar 09 '16 at 12:05

ade jones

639
11
15

1

Thanks but when I use Observable.from I have this at compilation : error TS2346: Supplied parameters do not match any signature of call target. And how to use Rx.Observable when Rx has no exported member ? – intuix Mar 09 '16 at 13:19
is that a typescript error relating to the list method signature? do you need maybe list(): any {... – ade jones Mar 09 '16 at 13:39
Don't get it what list() supposed to do ? List isn't either an Observable property.. I need a method from an Observable object which takes an array in parameter.. and finally has to be "subscribeable" as my Component calls subscribe on the result. – intuix Mar 09 '16 at 13:51
I have a similar issue but in my case, no errors, but it is not triggering an event downstream when i .map(..) on it – Sonic Soul Dec 14 '16 at 22:19
This is more appropriate answer IMO – Piyush Katariya Aug 19 '18 at 18:46

score 17 · Answer 2 · answered Jun 13 '18 at 06:22

17

Answer needs to be updated for RxJS 6, it is now

import {from} from 'rxjs';

const observable = from([ { a: 1, b: 2 } ]);

answered Jun 13 '18 at 06:22

Jaime Cham

1,494
1
15
16

Work with rxjs version 6. Thanks – Hardik Oct 06 '18 at 14:01
Perfect. Many Thanks! – samivic Apr 16 '20 at 14:18

score 14 · Answer 3 · answered Nov 28 '17 at 17:15

14

Observable.fromArray() was removed in RxJS version 5, use from()

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
...
Observable.from([1, 2, 3, 4]);

answered Nov 28 '17 at 17:15

Organic

141
1
3

score 4 · Answer 4 · answered Mar 11 '16 at 06:05

I had the same problem and had to add this import statement in my component:

import 'rxjs/add/observable/fromArray';

I found the import to add by searching for fromArray in the Rx.js file I was referencing (be careful since there may be different versions of the file in your project):

System.register("rxjs/add/observable/fromArray", ["rxjs/Observable", "rxjs/observable/ArrayObservable"], true, function(require, exports, module) {
  // ...
});

score 4 · Answer 5 · answered May 12 '16 at 07:45

4

I had the same problem, after some research in my code ...

I imported:

import {Observable} from "rxjs/Observable";

Instead of:

import {Observable} from "rxjs/Rx";

Hope it can help someone else.

answered May 12 '16 at 07:45

Vincent

733
1
9
16

Thank you for your answer. In my case this form worked out good: `import { Observable } from "rxjs";` – luke-at-work Oct 17 '16 at 21:01

swoodruff · Answer 6 · 2017-01-11T12:30:19.703

4

I had the same issue. I believe you may be getting this because fromArray has been deprecated.

import rxjs/Observable to prevent importing other parts of rxjs you don't need

import { Observable } from 'rxjs/Observable';

fromArray has been deprecated. Instead use

list() { return Observable.from([{ name: 'London' }]); }

edited Jan 11 '17 at 12:30

answered Jan 05 '17 at 12:34

swoodruff

66
4

Usually it is a good idea to add an explanation to your post that talks about how the code works. This allows new developers to understand what the code does. – Caleb Kleveter Jan 05 '17 at 13:22
1

@CalebKleveter - thanks for pointing this out. I had comments for the answer, but they were not obvious to the reader as they were code comments in side the block of code. I've updated the answer to pull the comments out. – swoodruff Jan 11 '17 at 12:31
import 'rxjs/add/observable/from'; – Zoidy Oct 25 '17 at 13:53

score 1 · Answer 7 · edited Oct 25 '19 at 19:51

1

try this:

import { from } from 'rxjs/observable/from';

const promiseSource = from(new Promise(resolve => resolve('Hello World!')));

https://learnrxjs.io/operators/creation/from.html

edited Oct 25 '19 at 19:51

Dalorzo

19,834
7
55
102

answered Jun 16 '18 at 06:58

Flavio Marques

79
1
4

Observable fromArray

7 Answers7

Linked