Question

想知道是否有人可以帮助我使用以下JS？我正在尝试从API

映射数据

var result = Object.keys(data).map(k => [new Date(k).getTime(), data[k]]);

这适用于像

这样的数组

{"2017-12-26":0,"2017-12-27":26,"2017-12-28":0}

但不是数组是

{"2017-12-21":{"nb_pageviews":10,"nb_uniq_pageviews":4,"nb_downloads":0,"nb_uniq_downloads":0,"nb_outlinks":4,"nb_uniq_outlinks":2,"nb_searches":0,"nb_keywords":0,"avg_time_generation":0.299},"2017-12-22":{"nb_pageviews":8,"nb_uniq_pageviews":4,"nb_downloads":0,"nb_uniq_downloads":0,"nb_outlinks":1,"nb_uniq_outlinks":1,"nb_searches":0,"nb_keywords":0,"avg_time_generation":0.453}}

如何为每个日期获取nb_pageviews和value的数据？

这将在NVD3图表中用作

d3.json(`https://discovrbookings.innocraft.cloud/?module=API&method=VisitsSummary.getVisits&idSite=2&period=day&date=last30&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff`, function(data1) {
  d3.json(`https://discovrbookings.innocraft.cloud/?module=API&method=VisitsSummary.getUniqueVisitors&idSite=2&period=day&date=last30&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff`, function(data2) {
    d3.json(`https://discovrbookings.innocraft.cloud/?module=API&method=VisitsSummary.getActions&idSite=2&period=day&date=last30&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff`, function(data3) {
      d3.json(`https://discovrbookings.innocraft.cloud/?module=API&method=VisitsSummary.getBounceCount&idSite=2&period=day&date=last30&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff`, function(data4) {
        d3.json(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last30&token_auth=68aa5bd12137f13255dcb98794b65dff`, function(data5) {

          var result = Object.keys(data1).map(k => [new Date(k).getTime(), data1[k]]);
          data1 = {
            "key": "Visits",
            "values": result
          };
          var result = Object.keys(data2).map(k => [new Date(k).getTime(), data2[k]]);
          data2 = {
            "key": "Unique Visits",
            "values": result
          };
          var result = Object.keys(data3).map(k => [new Date(k).getTime(), data3[k]]);
          data3 = {
            "key": "Actions",
            "values": result
          };
          var result = Object.keys(data4).map(k => [new Date(k).getTime(), data4[k]]);
          data4 = {
            "key": "Bounces",
            "values": result
          };
          var result = Object.keys(data5)
            .filter(k => !isNaN(data5[k].nb_pageviews))
            .map(k => [new Date(k).getTime(), data5[k].nb_pageviews]);
          data5 = {
            "key": "Page Views",
            "values": result
          };

          var data = [];
          data.push(data1);
          data.push(data2);
          data.push(data3);
          data.push(data4);
          data.push(data5);


          (function() {

            nv.addGraph(function() {

              var chart = nv.models.lineChart()
                .margin({
                  left: 45,
                  right: 30
                })
                .x(function(d) {
                  return d[0]
                })
                .y(function(d) {
                  return d[1]
                })

                .useInteractiveGuideline(true);


              chart.xAxis
                .tickFormat(function(d) {
                  return d3.time.format('%m/%d/%y')(new Date(d))
                });

              chart.yAxis
                .tickFormat(d3.format('d'));

              chart.yAxis.tickPadding(15);
              chart.xAxis.tickPadding(15);



              d3.select('#summaryChart svg')
                .datum(data)
                .transition().duration(500)
                .call(chart);

              nv.utils.windowResize(chart.update);

              $('#summaryChart').data('chart', chart);

              return chart;
            });

          })();
        });
      });
    });
  });
});

#summaryChart {
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>


<div id="summaryChart" class="line-chart text-center" data-x-grid="false">
  <svg></svg>
</div>

Answer 1

只需更改您的方法即可访问data[k].nb_pageviews

var result = Object.keys(data).map(k => [ new Date(k).getTime(), data[k].nb_pageviews ]);

某些日期对他们没有nb_pageviews属性，因此您可能也希望将其过滤掉

var result = Object.keys( data )
      .filter( k => !isNaN( data[k].nb_pageviews ) )
      .map(k => [ new Date(k).getTime(), data[k].nb_pageviews ] );

修改

如果想要＆＃39; 0＆＃39;而不是过滤掉那些没有nb_pageviews属性的日期，然后将其设为

data[k].nb_pageviews || 0

或

isNaN( data[k].nb_pageviews ) ? 0 : data[k].nb_pageviews || 0

最后

var result = Object.keys( data ) .map(k => [ new Date(k).getTime(), ( data[k].nb_pageviews || 0 ) ] );

在JSON中选择Object.keys

1 个答案: