1

I am trying to call the data present in (data/app.json) file.

Below is component(customer.component.ts)file

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; 


@Component({
   selector: 'ylb-customer',
   templateUrl: './customer.component.html',
   styleUrls: ['./customer.component.css']
})
export class CustomerComponent  {

   spaceScreens: Array<any>;

   constructor(private http:Http){
         this.http.get('./data.json')
        .map(response => response.json().screenshots)
        .subscribe(res => this.spaceScreens = res);
      }


 }

This error I got

error TS2339: Property 'map' does not exist on type 'Observable'.

For the error i tried this solution too

 import 'rxjs/add/operator/map'

and

import 'rxjs/Rx';

Which were marked as correct in this post(Property 'map' does not exist on type 'Observable<Response>')

Still no result.

this is (customer.component.html)file

         <div>
          <mat-card class="example-card">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image" *ngFor="let spaceScreen of spaceScreens; let i = index">
                    <img src="{{ spaceScreen.img }}">
              </div>
              <mat-card-title><p>{{ spaceScreen.description }}</p></mat-card-title>
            </mat-card-header>
          </mat-card>
          </div>

This is (app.json) present in inside folder called data

     {   
       "screenshots":[ 
         {
            "img":"assets/img/json_1.jpg",
            "description":"USA"
        },

        {
            "img":"assets/img/json_2.jpg",
            "description":"UK"
        },

        {
            "img":"assets/img/json_3.jpg",
            "description":"INDIA"
        }

    ]        
  }

Now getting this error

    ERROR TypeError: Cannot read property 'description' of undefined
Shankar
  • 2,565
  • 8
  • 29
  • 56

2 Answers2

1

Starting from RxJS 5.5 you need to use pipeable operators and pass map operator into the pipe function.

Import map operator from the 

import { map } from 'rxjs/operators'

and use like

this.http.get('./data.json').pipe(
        map(response => response.json().screenshots)
    ).subscribe(res => this.spaceScreens = res);
Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • Hi @Shankarguru if this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Tim Martens Aug 03 '18 at 08:45
  • Ya i know,But i have to wait 5 min to give correct tick mark.Surely i will give after 5 min. – Shankar Aug 03 '18 at 08:47
  • Maybe you have used `.description` in another place also except view? – Suren Srapyan Aug 03 '18 at 09:36
  • I haven't used anywhere the image is coming ,But no the text – Shankar Aug 03 '18 at 10:40
1

Property ‘map’ does not exist on type Observable. The problem was related to the fact that you need to add pipe around all operators.

Change this,

this.http.get('./data.json').map(data => {})

to this

this.http.get('./data.json').pipe(map(data => {}))

And

Import map like this,

import { map } from 'rxjs/operators';

It will solve your issues.

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396