0

I am not able to map the nested json array from my local mock data. The json data is supposed to be like

{
 success: true,
 data: {
   count: 2,
   pageNo: 1,
   pageSize: 10,
   list: [
     {
       title: 'title',
       subtitle: 'subtitle',
       priority: 0,
       img: ' ',
       url: ' '},
     {
       title: 'title2',
       subtitle: 'subtitle',
       priority: 0,
       img: ' ',
       url: ' '}
   ]
 }
}

The service is

import { Injectable }                   from '@angular/core';
import { HttpClient }                   from '@angular/common/http';
import { Observable }                   from 'rxjs/Observable';
import 'rxjs/add/operator/map';

interface Carousel {
    success: boolean;
    data: CarouselData;
}

interface CarouselData {
    count: number;
    pageNo: number;
    pageSize: number;
    list: CarouselList[];
}

interface CarouselList {
    title: string;
    subtitle: string;
    priority: number;
    img: string;
    url: string;
}

@Injectable()
export class IndexService {
    private carouselUrl = 'api/carousel';

    constructor(private http: HttpClient) { }

    getCarouselList(): Observable<CarouselData>{
        return this.http.get<Carousel>(this.carouselUrl).map(response => 
        response.data as CarouselData);
    }

}

The component is 

carouselList: CarouselData;
ngOnInit():void{
    this.indexService.getCarouselList().subscription(response => {
      this.carouselList = response;
      console.log(response);
    })
}

The console log is enter image description here

I can access the json data in the correct form, but when I try to access the array in the list object, I got a undefined error.

The modification in the service file is

getCarouselList(): Observable<CarouselList[]>{
    return this.http.get<Carousel>(this.carouselUrl).map(response => 
    response.data.list as CarouselList[]);
}

and the corresponding modification in the component is

carouselList: CarouselList[];
ngOnInit():void{
    this.indexService.getCarouselList().subscription(response => {
      this.carouselList = response;
      console.log(response);
    })
}

In the final, the console prints a undefinied object instead of printing the array objects of the list. The compiler and browser don't display any error, but I just can't map the sub-array objects in the list. Can you please help me with this?

Thanks

Nan Zhao
  • 1
  • 2
  • Did you check `response.data.list` by logging in console? Is it data as expected? – Madhu Ranjan Oct 03 '17 at 15:41
  • @MadhuRanjan The problem is that `response.data.list = undefined`, but `response.data` is well formed as expected. I define a Interface to present the CarouselList, but somehow it cannot be recognized. – Nan Zhao Oct 03 '17 at 16:29
  • If `response.data.list` is undefined how can it be translated to `CarouselList[]` , and what do you mean by `response.data is well formed as expected`. Can you add a simple reproducable Plunker example? – Madhu Ranjan Oct 03 '17 at 16:45
  • Try `response.data.data.list` – Romain Deneau Oct 03 '17 at 20:30
  • @RomainDeneau, it doesn't work, because I've assigned the response with a Interface `get(this.carouselUrl)` – Nan Zhao Oct 04 '17 at 11:18
  • @MadhuRanjan It means that via `console.log(response.data)` the json format can be mapping from the mock data, which is `{count: 2, pageNo: 1, pageSize: 10, list: Array(2)}`. When I try to access the list array, i.e. via `console.log(response.data.list)`, the log in the console displays `undefined`. – Nan Zhao Oct 04 '17 at 11:22
  • 1
    @RomainDeneau, you were right, the format of `response` is `data{success: true, data: {...}}`. I add a interface `interface Data {data: Carousel }` and modify the service as follows `return this.http.get(this.carouselUrl)>map(response=>response.data);` It works!! Thank you! – Nan Zhao Oct 04 '17 at 11:42

0 Answers0