在JSON中选择Object.keys

Question

Wondering if someone can help me with the below JS? I am trying to map data from an API

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

This works well on an array like

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

but not if the array is

{"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}}

How can I get just the data for nb_pageviews and the value for each date?

This is to be used in a NVD3 Chart as

 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

Just change your method to access the data[k].nb_pageviews

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

Some of the dates have no nb_pageviews properties against them, so you may want to filter them out as well

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

Edit

If want '0' instead of filtering out those dates which doesn't have nb_pageviews property then make it

data[k].nb_pageviews || 0

or

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

Finally

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