Angular 6 Property 'map' does not exist on type 'Object'

Question

I have a api which return objects / array like this:

(2) [{...}, {...}]      object

  0: {a: '1', b: {id: '1'}}
  1: {a: '2', b: {id: '2'}}

So it looks like array of objects (but debuges says 'Object').

So in my code I have:

return this.http.get(this.url).pipe(
  map(datas => {
    return datas.map(data => {
      let object = {
        a: data['a'],
        b: data['b']['id'],
      }
      return object;
    })
  })
);

but there:

return datas.map(data => {

I got an error:

Property 'map' does not exist on type 'Object'.

But application is working well is correctly shows this data. But this error is annoying.

What can I do?

You can tell the Typescript compiler the type of the return value with `(datas: Array) => { ... }` — Matthias Sommer, May 29 '18 at 08:14

score 5 · Answer 1 · answered Jun 01 '18 at 12:12

The following operators were renamed in RXJS6

catch() => catchError()
do() => tap()
finally() => finalize()
switch() => switchAll()

Additionally, some Observable-creation methods were renamed/ refactored:

throw() => throwError()
fromPromise() => from() (this automatically detects the type)

FOR MAP syntax

import { map } from 'rxjs/operators';

myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

score 3 · Answer 2 · answered Jul 05 '18 at 08:18

3

I had to specify the type of the return value with (data: any) => { ... }

answered Jul 05 '18 at 08:18

Laurie Clark

610
7
10

This was what I was looking for! I wish this gets more upvotes so people can see. – Andrej Feb 18 '20 at 10:50

score 1 · Answer 3 · answered Jul 30 '18 at 11:06

1

you have to import map in ng6 like so:

import { map } from 'rxjs/operators';

answered Jul 30 '18 at 11:06

Viclotana

51
1

score 1 · Answer 4 · edited Oct 29 '18 at 21:15

In Angular 6x with rxjs 6.3.3 you can do this. In the file(app.component.ts)

import { Component } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent 
{    
  _url = 'http://...';
  constructor( private http: HttpClient ) { }
  articles: Observable<any>;

  // Method and constructor
  getAPIRest() 
  {       
    const params = new HttpParams().set('parameter', 'value');
    const headers = new HttpHeaders().set('Autorization', 'auth-token');
    this.articles = this.http.get(this._url + '/articles', { params, headers })
                 .pipe( retry(3),
                        map((data => data),
                        catchError(err => throwError(err))));
  }
}

score 0 · Answer 5 · answered Jun 01 '18 at 12:07

0

try this:

npm install rxjs@6 rxjs-compat@6 --saven

please visit Angular 2 beta.17: Property 'map' does not exist on type 'Observable<Response>' for more explnation.

answered Jun 01 '18 at 12:07

Citizen

11
4

Angular 6 Property 'map' does not exist on type 'Object'

5 Answers5

Linked