Angular2 HTTP Providers，从 JSON 中获取一个字符串用于 Amcharts [英] Angular2 HTTP Providers, get a string from JSON for Amcharts

问题描述

这是一个略显凌乱的问题.虽然看起来我在问关于 amCharts 的问题，但我真的只是想弄清楚如何从 HTTP 请求中提取一个数组，然后将它转换为一个变量并将其放入 3-party javacript.

This is a slightly messy questions. Although it appears I'm asking question about amCharts, I really just trying to figure how to extract an array from HTTP request and then turn it into a variable and place it in to 3-party javacript.

一切都从这里开始，这个问题，AmCharts 支持人员亲切地回答了这个问题.

It all starts here, with this question, which was kindly answered by AmCharts support.

从 plnker 中可以看出.图表正在运行.图表的数据是硬编码的:

As one can see from the plnker. The chart is working. Data for the chart is hard coded:

`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}];`

所以我们知道 amCharts 部分有效.知道问题在哪里将硬编码数据更改为 json 请求，以便它可以是动态的.我不认为这应该是非常困难的，但对于我的生活，我似乎无法弄清楚.

So we know the amCharts part works. Know where the problem is changing hard coded data to a json request so it can be dynamic. I don't think this should be tremendously difficult, but for the life of me I can't seem figure it out.

第一个问题是我找不到关于 .map、.subscribe 或 .observable 的任何文档.

The first issue is I can't find any documentation on .map, .subscribe, or .observable.

所以这是一个 plunker 看起来与第一个非常相似，但是它有一个 http 提供者和可注射的.它坏了，因为我不知道如何从服务中提取数据并将其放入 AmCharts 函数中.我知道如何从 http 提供程序中提取数据并使用 NgFor 将其显示在模板中，但我不需要在模板(视图)中使用它.如您所见，我使用 getTitle() 函数成功地从服务传输了数据.

So here is a plunker that looks very similar to the first one, however it has an http providers and injectable. It's broken, because I can't figure out how to pull the data from the service an place it into the AmCharts function. I know how pull data from a http provider and display it in template using NgFor, but I don't need it in the template (view). As you can see, I'm successful in transferring the data from the service, with the getTitle() function.

    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;

所以最终的问题是为什么我不能使用服务来获取数据，将数据转换为变量并将其放入图表中.我怀疑 options.json 中可能有一些线索，因为 json 格式可能不正确?我是否声明了正确的变量?最后，它可能与 observable/map 有关系?

So the ultimate question is why can't I use a service to get data, turn that data into a variable and place it into a chart. I suspect a few clues might be in options.json as the json might not be formatted correctly? Am I declaring the correct variables? Finally, it might have something to do with observable / map?

推荐答案

这里有一些事情.首先这是一个类，保持这种方式.我的意思是将构造函数中的函数移出构造函数，并使它们成为类的方法.

You have a few things here. First this is a class, keep it that way. By that I mean to move the functions you have inside your constructor out of it and make them methods of your class.

其次，你有这段代码

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

subscribe 内部发生的事情异步运行，因此 this.chart_data 不会存在于其中.你在这里做的是分配对象本身，在这种情况下是什么 subscribe 返回，而不是 http 响应.所以你可以简单地将你的库初始化放在订阅中，这样就可以了.

What happens inside subscribe runs asynchronously therefore this.chart_data won't exist out of it. What you're doing here is assigning the object itself, in this case what subscribe returns, not the http response. So you can simply put your library initialization inside of the subscribe and that'll work.

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

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

现在，您终于有了一件有趣的事情.在您的 JSON 中，您的 date 属性包含一个带有 new Date 的字符串，这只是一个字符串，并且您的库需要(对于我测试的内容)一个 Date 对象，因此您需要解析它.这里的问题是默认情况下您不能解析或字符串化 Date 对象.我们需要将该字符串转换为 Date 对象.

Now, finally you have an interesting thing. In your JSON you have your date properties contain a string with new Date inside, that's nothing but a string and your library requires (for what I tested) a Date object, so you need to parse it. The problem here is that you can't parse nor stringify by default a Date object. We need to convert that string to a Date object.

看看这段代码，我使用了 eval(请不要自己动手，只是为了展示目的！)

Look at this snippet code, I used eval (PLEASE DON'T DO IT YOURSELF, IS JUST FOR SHOWING PURPOSES!)

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;
   });
 }

这里我正在做的是重建数组，使值符合要求.

Here what I'm doing is reconstructing the array so the values are as required.

对于后一种情况，您必须使用 (new Date('YOUR DATE')).toJSON() 构建 json，并且可以使用 将其解析为 Date 对象new Date(yourJSON)(参考 Date.prototype.toJSON() - MDN).这是您应该在服务器端解决的问题.假设你已经解决了这个问题，你的代码应该如下所示

For the latter case you'll have to construct your json using (new Date('YOUR DATE')).toJSON() and you can parse it to a Date object using new Date(yourJSON) (referece Date.prototype.toJSON() - MDN). This is something you should resolve in your server side. Assuming you already solved that, your code should look as follows

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

这是带有邪恶 eval 的 plnkr.请记住，您必须将日期作为 JSON 从服务器发送到您的客户端，并且在您的客户端中您必须将其解析为日期.

Here's a plnkr with the evil eval. Remember, you have to send the date as a JSON from the server to your client and in your client you have to parse it to a Date.

希望对你有所帮助.

这篇关于Angular2 HTTP Providers，从 JSON 中获取一个字符串用于 Amcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！