Fournisseurs HTTP Angular2, obtenez une chaîne à partir de JSON pour Amcharts

Question

Ceci est une question légèrement en désordre. Bien qu'il semble que je pose des questions sur amCharts, j'essaie simplement de comprendre comment extraire un tableau de la requête HTTP, puis le transformer en une variable et le placer dans un javacript à trois parties.

Tout commence ici, with this question, qui a été aimablement répondu par le support d'AmCharts. Comme on peut le voir sur le plnker. Le tableau fonctionne. Les données du graphique sont codées en dur:

`var chartData = [{date: new Date(2015,2,31,0,0,0,  0),value:372.10,volume:2506100},{date: new Date(2015,3,1,0, 0, 0, 0),value:370.26,volume:2458100},{date: new Date(2015,3,2,0, 0, 0, 0),value:372.25,volume:1875300},{date: new Date(2015,3,6,0, 0, 0, 0),value:377.04,volume:3050700}];` 

Nous savons donc que la partie amCharts fonctionne. Sachez où le problème est en train de modifier les données codées en dur dans une requête JSON, de sorte qu'elle peut être dynamique. Je ne pense pas que cela devrait être extrêmement difficile, mais pour la vie de moi, je n'arrive pas à comprendre.

Le premier problème est que je ne trouve aucune documentation sur .map, .subscribe, ou .observable.

Donc, voici un plunker qui ressemble beaucoup à la première, mais il a un fournisseur http et injectable. C'est cassé, parce que je ne peux pas comprendre comment tirer les données du service et les placer dans la fonction AmCharts. Je sais comment extraire les données d'un fournisseur http et les afficher dans un template en utilisant NgFor, mais je n'en ai pas besoin dans le template (vue). Comme vous pouvez le voir, je réussis à transférer les données du service, avec la fonction getTitle().

this.chart_data =_dataService.getEntries(); 
    console.log('Does this work? '+this.chart_data); 

    this.title = _dataService.getTitle(); 
    console.log('This works '+this.title); 

    // Transfer the http request to chartData to it can go into Amcharts 
    // I think this should be string? 
    var chartData = this.chart_data; 

La question ultime est pourquoi je ne peux pas utiliser un service pour obtenir des données, transformer ces données en une variable et le placer dans un tableau. Je soupçonne que quelques indices pourraient être dans options.json car le json pourrait ne pas être formaté correctement? Est-ce que je déclare les bonnes variables? Enfin, il pourrait avoir quelque chose à voir avec observable/carte?

Answer 1

Vous avez quelques petites choses ici. D'abord c'est une classe, continue comme ça. Je veux dire par là déplacer les fonctions que vous avez dans votre constructeur et en faire des méthodes de votre classe.

Deuxièmement, vous avez ce morceau de code

this.chart_data =_dataService.getEntries().subscribe((data) => { 
    this.chart_data = data; 
}); 

Qu'est-ce qui se passe à l'intérieur subscribe fonctionne donc de manière asynchrone this.chart_data n'existera sur elle. Ce que vous faites ici est d'assigner l'objet lui-même, dans ce cas ce que subscribe renvoie, pas la réponse http. Donc, vous pouvez simplement mettre votre bibliothèque d'initialisation à l'intérieur de l'abonnement et cela fonctionnera.

_dataService.getEntries().subscribe((data) => { 

     if (AmCharts.isReady) { 
     this.createStockChart(data); 
     } else { 
     AmCharts.ready(() => this.createStockChart(data)); 
     } 
}); 

Maintenant, enfin, vous avez une chose intéressante.Dans votre JSON vous avez vos propriétés date contiennent une chaîne avec une nouvelle date à l'intérieur, ce n'est rien mais une chaîne et votre bibliothèque nécessite (pour ce que j'ai testé) un objet Date, vous devez donc l'analyser. Le problème ici est que vous ne pouvez pas analyser ni stringifier par défaut un objet Date. Nous devons convertir cette chaîne en un objet Date.

Regardez ce fragment de code, j'ai utilisé eval (NE PAS S'IL VOUS PLAÎT BRICOLAGE, EST JUSTE À DES FINS MONTRANT!)

let chartData = []; 
    for(let i = 0; i < data[0].chart_data.length; i++) { 
     chartData.push({ 
      // FOR SHOWING PURPOSES ONLY, DON'T TRY IT AT HOME 
      // This will parse the string to an actual Date object 
      date : eval(data[0].chart_data[i].date); 
      value : data[0].chart_data[i].value; 
      volume : data[0].chart_data[i].volume; 
    }); 
} 

Voici ce que je fais est la reconstruction de l'ensemble de sorte que le les valeurs sont telles que requises.

Pour ce dernier cas, vous devrez construire votre JSON en utilisant (new Date('YOUR DATE')).toJSON() et vous pouvez l'analyser à un objet Date à l'aide new Date(yourJSON) (referece Date.prototype.toJSON() - MDN). C'est quelque chose que vous devriez résoudre du côté de votre serveur. En supposant que vous avez déjà résolu ce problème, votre code devrait se présenter comme suit

// The date property in your json file should be stringified using new Date(...).toJSON() 
date : new Date(data[0].chart_data[i].date); 

Voici un plnkr avec le mal eval. Rappelez-vous, vous devez envoyer la date en tant que JSON du serveur à votre client et dans votre client, vous devez l'analyser en une Date.

J'espère que cela vous aide un peu.

Answer 2

Si la méthode getEntries de DataService retourne une observable, vous devez vous abonner à ce sujet pour obtenir des données:

_dataService.getEntries().subscribe(
    (data) => { 
    this.chart_data = data; 
    }); 

Ne pas oublier que les données sont reçues de manière asynchrone à partir d'un appel HTTP. La méthode http.get renvoie un observable (quelque chose de "similaire" à promettre) recevra les données dans le futur. Mais lorsque la méthode getEntries renvoie les données ne sont pas encore là ...

Le getTitle est une méthode synchrone de sorte que vous pouvez l'appeler comme vous l'avez fait.