1. #1
    Membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    février 2013
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2013
    Messages : 107
    Points : 54
    Points
    54

    Par défaut [Angular 2] - Uncaught (in promise): RangeError: Maximum call stack size exceeded

    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

  2. #2
    Membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    février 2013
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2013
    Messages : 107
    Points : 54
    Points
    54

    Par défaut

    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. ORA-02257: maximum number of columns exceeded
    Par khomar dans le forum SQL
    Réponses: 0
    Dernier message: 12/03/2010, 15h02
  2. call stack pour info exceptions
    Par stroumpf dans le forum Langage
    Réponses: 0
    Dernier message: 10/01/2008, 11h34
  3. Obtenir call stack d'un programme java/C++ ?
    Par SteelBox dans le forum Linux
    Réponses: 22
    Dernier message: 26/11/2006, 20h16
  4. [Visual 2005]call stack
    Par ep31 dans le forum Visual C++
    Réponses: 3
    Dernier message: 19/09/2006, 16h16
  5. Recursivité et maximum native stack size
    Par kinnex91 dans le forum Eclipse Java
    Réponses: 2
    Dernier message: 19/04/2006, 14h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo