2017-10-19 15 views
0

J'essaie de charger des données chartist via un appel api, bien que les données soient renvoyées mais ne se chargent pas dans les séries de chartistes.Impossible de remplir Chartist avec les données de http get (Angular 4)

// Initialize data series 
seriesData: any[] = []; 

// Function to retrieve data from api 
getSeriesData() { 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
     data => this.seriesData = data, // This is populated 
     err => console.log(err) 
    ); 
    } 

//ngInit 
ngOnInit() { 
    this.getSeriesData(); 

// Chartist 
const dataDailySalesChart: any = { 
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
     series: [ 
     this.seriesData // THIS IS ALWAYS EMPTY 
     ] 
    }; 
} 
+0

Bien sûr, il est vide, vous bâtissez les données cartographiques avant la promesse aurait pu être résolue. Faites-le dans le rappel, où vous avez ces données. – jonrsharpe

+0

@ jonrsharpe, S'il vous plaît pouvez-vous aider avec un exemple. Je suis nouveau à cela. –

+0

Possible dupliquer de [Comment retourner les données de la promesse] (https://stackoverflow.com/questions/37533929/how-to-return-data-from-promise) – jonrsharpe

Répondre

1

vous essayez de construire les données cartographiques avant la promesse resolved.Since getSeriesData est asynchrone, vous devez faire somehting comme ça,

getSeriesData() { 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
     data => this.seriesData = data, // This is populated 
     this.generateChart(this.seriesData), 
     err => console.log(err) 
    ); 
    } 

ngOnInit() { 
    this.getSeriesData();  
} 

generateChart(chartData:any){ 
     const dataDailySalesChart: any = { 
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 
     series: [ 
     chartData 
     ] 
    }; 
}; 
+0

Merci pour la réponse rapide. Votre exemple fonctionne, mais je ne peux toujours pas transmettre dataDailySalesChart à cette variable car elle se trouve dans generateChart. var dailySalesChart = new Chartist.Line ('# dailySalesChart', dataDailySalesChart, optionsDailySalesChart); –

+0

vous pouvez simplement attribuer les données – Sajeetharan

+0

Vous êtes génial! Merci beaucoup. @jonrsharpe, j'apprécie votre contribution. –