Discussion :

[corv0]

Bonjour à tous,

Dans le cadre d'un projet personnel, je suscite votre aide pour régler un petit problème.
Je récupère via un services des informations issue d'un tableau JSON via l'API Google Places. Les informations globale s'affichent correctement mais lors d'un event sur un bouton pour voir le détail by ID,
j'ai l'erreur suivante qui s'affiche : Uncaught (in promise): RangeError: Maximum call stack size exceeded

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
///////////////////////restaurant.services.ts/////////////////
 
import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Restaurant } from "../class/restaurant.class";
 
import "rxjs/add/operator/map";
import "rxjs/add/operator/do"; // il se contente de regarder à l'intérieur de ce qui est retourné par GET
import "rxjs/add/observable/of";
import "rxjs/add/operator/catch";
 
 
@Injectable()
 
export class RestaurantServices {
 
    private data: any;
    private observable: Observable<any>;
    private url: string = 'app/api/restaurant.json'
 
    constructor(private http: Http){}
 
 
    getRestaurantFromAPIWithCache() {
 
        if (this.data) {
            return Observable.of(this.data);
        } else if (this.observable) {
            return this.observable;
        } else {
            this.observable = this.http
                .get(this.url)
                .map(res => res.json())
                .map(response => {
                    this.observable = null;
                    this.data = response;
                    return this.data;
                })
                .catch(error => {
                    let errorMsg = 'une erreur ${error.status} est survenu en tentant de joindre ${error.url}';
                    return Observable.throw(errorMsg);
                });
 
            return this.observable;
        }
    }
 
    getRestaurantById(id:any) {
        if (!this.data) {
            return undefined;
        }
        const result = this.data.filter((resto: any) => resto.id === id);
        console.log("Dans restoServices: "+result);
        if (result.length > 0) {
            return result[0]; // recupère le premier élément du tableau
        }
    }
 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
///////////////////////restaurant.list.ts/////////////////
 
import { Component, OnInit } from "@angular/core";
import { Restaurant } from "./class/restaurant.class";
 
import { RestaurantServices } from "./services/restaurant.services";
 
@Component({
  moduleId: module.id,
  templateUrl: "restaurant-list.component.html",
  styleUrls: ['./css/restaurant.css']
})
 
export class RestaurantListComponent implements OnInit {
 
  restos: Restaurant[];
  errorMsg: string = "";
 
  constructor(private _restoServices: RestaurantServices) { }
 
  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this._restoServices.getRestaurantFromAPIWithCache()
      .subscribe(res => {
        this.restos = res.results;
      });
  }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
///////////////////////restaurant.list.html/////////////////
 
<div *ngFor="let resto of restos">
<div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <div *ngFor="let images of resto.photos" >
            <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=640&maxheight=640&photoreference={{images.photo_reference}}&key=AIzaSyA2VI_ZemIgFgbXo7sHtUms7E7NhURqhTw" alt="img">
          </div>
              <div class="caption">
                <h3>{{resto.name}}</h3>
                  <p id="cityArea">{{resto.vicinity}}</p>
                  <a [routerLink]="['/restaurant', resto.id]">
                    <button type="button" class="btn btn-info center-block" data-toggle="modal" data-target="#myModal">Details <span class="glyphicon glyphicon-info-sign"></span></button>
                  </a>
              </div>
         </div>
      </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
///////////////////////restaurant.details.ts/////////////////
 
import { Component, OnInit, Input } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
 
import { Restaurant } from "./class/restaurant.class";
import { RestaurantServices } from "./services/restaurant.services";
 
@Component({
    moduleId:module.id,
    selector:"resto-details",
    templateUrl:"restaurant-details.component.html",
    styleUrls:['./css/restaurant.css']
})
 
export class RestaurantDetailsComponent implements OnInit{
 
    @Input() rt:Restaurant;
    resto:Restaurant;
    title:string ="";
 
    constructor(private route:ActivatedRoute, private router:Router, private _restoServices:RestaurantServices){}
 
        ngOnInit() {
            //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
            //Add 'implements OnInit' to the class.
 
            let id= +this.route.snapshot.params['id'];
            this.resto= this._restoServices.getRestaurantById(id);
            console.log("ID detailPage "+ id);
        }
 
        goBack(){
            this.router.navigate(['/restaurant']);
        }
 
 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
///////////////////////restaurant.details.html/////////////////
 
<resto-details [rt]="resto"></resto-details>
 
<br>
       <!-- Modal -->
  <div *ngIf="resto">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title" id="myModalLabel">{{ rt.name }}</h2>
          </div>
          <div class="modal-body">
              <!-- Description du restaurant  -->
              <div>{{ rt.name }}</div>
              <div>{{ rt.vicinity | uppercase}}</div><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)='goBack()'>Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>			  
<div *ngIf="!resto">Pas de Restaurant correspondant trouvée</div>

Merci de vos réponses

[corv0]

L'erreur est là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const result = this.data.filter((resto: any) => resto.id === id);

C'est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.data.results.filter