将JSON数据格式化为表格

Question

需要帮助映射JSON才能正确显示。

如果我使用JSON，例如返回

{"2017-12-17":[],"2017-12-18":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":5,"nb_users":0,"max_actions":5,"sum_visit_length":184,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-19":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":7,"nb_actions":29,"nb_users":0,"max_actions":15,"sum_visit_length":4195,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"},{"label":"Smartphone","nb_uniq_visitors":2,"nb_visits":2,"nb_actions":2,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==smartphone","logo":"plugins\/Morpheus\/icons\/dist\/devices\/smartphone.png"}],"2017-12-20":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":4,"nb_users":0,"max_actions":4,"sum_visit_length":794,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-21":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":14,"nb_users":0,"max_actions":14,"sum_visit_length":287,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-22":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":2,"nb_actions":9,"nb_users":0,"max_actions":7,"sum_visit_length":219,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-23":[],"2017-12-24":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":12,"nb_users":0,"max_actions":12,"sum_visit_length":480,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-25":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":3,"nb_actions":4,"nb_users":0,"max_actions":2,"sum_visit_length":7,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2017-12-26":[],"2017-12-27":[{"label":"Desktop","nb_uniq_visitors":10,"nb_visits":10,"nb_actions":10,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":10,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"},{"label":"Smartphone","nb_uniq_visitors":7,"nb_visits":7,"nb_actions":7,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":7,"nb_visits_converted":0,"segment":"deviceType==smartphone","logo":"plugins\/Morpheus\/icons\/dist\/devices\/smartphone.png"},{"label":"Tablet","nb_uniq_visitors":5,"nb_visits":5,"nb_actions":5,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":5,"nb_visits_converted":0,"segment":"deviceType==tablet","logo":"plugins\/Morpheus\/icons\/dist\/devices\/tablet.png"},{"label":"Unknown","nb_uniq_visitors":4,"nb_visits":4,"nb_actions":4,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":4,"nb_visits_converted":0,"logo":"plugins\/Morpheus\/icons\/dist\/devices\/unknown.png"}],"2017-12-28":[],"2017-12-29":[],"2017-12-30":[],"2017-12-31":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":6,"nb_users":0,"max_actions":6,"sum_visit_length":41,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2018-01-01":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":2,"nb_actions":9,"nb_users":0,"max_actions":7,"sum_visit_length":103,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2018-01-02":[],"2018-01-03":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":3,"nb_actions":6,"nb_users":0,"max_actions":3,"sum_visit_length":250,"bounce_count":1,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\/Morpheus\/icons\/dist\/devices\/desktop.png"}],"2018-01-04":[],"2018-01-05":[]}

如何在foreach标签表中显示所有日期的所有值的总和？ 例如

<tr>
<td>Desktop</td>
<td>//value of nb_visits<td>
<td>//value of nb_uniq_visitors</td>
...

这是我当前的JS，但是我无法进一步映射它。

$.each(device_data, function(key, val) {
  var tr=$('<tr></tr>');
  $.each(val, function(k, v){
    $('<td>'+v+'</td>').appendTo(tr);
  });
  tr.appendTo('#display');
  console.log(device_data)
});

另外，由于logo返回的URL在API服务器上，因此如何为每个label添加新的logo URL？

输出应该以这种格式出现

Answer 1

您只是在迭代这些年，但是这些年是包含您的数据的数组。 您只需要添加另一个循环。 这是使用jQuery的$.each函数的问题， $.each函数将循环使用相同函数的数组或对象属性。 为了避免这种情况，您应该尽可能使用本机循环。

 const device_data={"2017-12-17":[],"2017-12-18":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:1,nb_actions:5,nb_users:0,max_actions:5,sum_visit_length:184,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-19":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:7,nb_actions:29,nb_users:0,max_actions:15,sum_visit_length:4195,bounce_count:2,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"},{label:"Smartphone",nb_uniq_visitors:2,nb_visits:2,nb_actions:2,nb_users:0,max_actions:1,sum_visit_length:0,bounce_count:2,nb_visits_converted:0,segment:"deviceType==smartphone",logo:"plugins/Morpheus/icons/dist/devices/smartphone.png"}],"2017-12-20":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:1,nb_actions:4,nb_users:0,max_actions:4,sum_visit_length:794,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-21":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:1,nb_actions:14,nb_users:0,max_actions:14,sum_visit_length:287,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-22":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:2,nb_actions:9,nb_users:0,max_actions:7,sum_visit_length:219,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-23":[],"2017-12-24":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:1,nb_actions:12,nb_users:0,max_actions:12,sum_visit_length:480,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-25":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:3,nb_actions:4,nb_users:0,max_actions:2,sum_visit_length:7,bounce_count:2,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2017-12-26":[],"2017-12-27":[{label:"Desktop",nb_uniq_visitors:10,nb_visits:10,nb_actions:10,nb_users:0,max_actions:1,sum_visit_length:0,bounce_count:10,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"},{label:"Smartphone",nb_uniq_visitors:7,nb_visits:7,nb_actions:7,nb_users:0,max_actions:1,sum_visit_length:0,bounce_count:7,nb_visits_converted:0,segment:"deviceType==smartphone",logo:"plugins/Morpheus/icons/dist/devices/smartphone.png"},{label:"Tablet",nb_uniq_visitors:5,nb_visits:5,nb_actions:5,nb_users:0,max_actions:1,sum_visit_length:0,bounce_count:5,nb_visits_converted:0,segment:"deviceType==tablet",logo:"plugins/Morpheus/icons/dist/devices/tablet.png"},{label:"Unknown",nb_uniq_visitors:4,nb_visits:4,nb_actions:4,nb_users:0,max_actions:1,sum_visit_length:0,bounce_count:4,nb_visits_converted:0,logo:"plugins/Morpheus/icons/dist/devices/unknown.png"}],"2017-12-28":[],"2017-12-29":[],"2017-12-30":[],"2017-12-31":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:1,nb_actions:6,nb_users:0,max_actions:6,sum_visit_length:41,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2018-01-01":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:2,nb_actions:9,nb_users:0,max_actions:7,sum_visit_length:103,bounce_count:0,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2018-01-02":[],"2018-01-03":[{label:"Desktop",nb_uniq_visitors:1,nb_visits:3,nb_actions:6,nb_users:0,max_actions:3,sum_visit_length:250,bounce_count:1,nb_visits_converted:0,segment:"deviceType==desktop",logo:"plugins/Morpheus/icons/dist/devices/desktop.png"}],"2018-01-04":[],"2018-01-05":[]}; $.each(device_data, function(year, rows) { $.each(rows, function(index, item) { var tr=$('<tr></tr>'); $('<td>'+year+'</td>').appendTo(tr); $.each(item, function(k, v) { $('<td>'+v+'</td>').appendTo(tr); }) tr.appendTo('#display'); }); }); 

 table { border-collapse: collapse } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="display" border="1"></table> 

Answer 2

我希望这些金额是正确的。 我更喜欢香草，但您始终可以将创建DOM的一部分重写为jQuery：

 // group array of objects by key, this accepts also notation 'firstLevel.secondLevel' // return object with grouped key' values Array.prototype.groupBy = function(key) { var path = key.split('.'); var result = {}; try { this.forEach(function(item) { // es6: path.reduce((a, b) => a[b], item) type = path.reduce(function(a, b) { return a[b] }, item) || 'null'; if (!result[type]) result[type] = []; result[type].push(item); }); return result; } catch(err) { console.log(err); return {}; } }; function getPropertySum(key, arr) { return arr.reduce((a,b) => (key in b ? a + b[key] : a),0) } // one array of all dates let flattenArr = [].concat.apply([], Object.values(data)); // object of grouped dates by device let groups = flattenArr.groupBy('label'); let table = document.getElementById('display'); Object.keys(groups).forEach(function(label) { let row = document.createElement('tr'); let logw = document.createElement('td'); let logo = document.createElement('img'); let lab = document.createElement('td'); let nbv = document.createElement('td'); let nbu = document.createElement('td'); row.appendChild(logw); row.appendChild(lab); row.appendChild(nbv); row.appendChild(nbu); logw.appendChild(logo); logo.src = label + '.png'; // replace with link from API lab.innerHTML = label; nbv.innerHTML = getPropertySum('nb_visits', groups[label]); nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]); table.appendChild(row); }); 

 <table id="display"></table> <script> var data = {"2017-12-17":[],"2017-12-18":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":5,"nb_users":0,"max_actions":5,"sum_visit_length":184,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-19":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":7,"nb_actions":29,"nb_users":0,"max_actions":15,"sum_visit_length":4195,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"},{"label":"Smartphone","nb_uniq_visitors":2,"nb_visits":2,"nb_actions":2,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==smartphone","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/smartphone.png"}],"2017-12-20":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":4,"nb_users":0,"max_actions":4,"sum_visit_length":794,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-21":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":14,"nb_users":0,"max_actions":14,"sum_visit_length":287,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-22":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":2,"nb_actions":9,"nb_users":0,"max_actions":7,"sum_visit_length":219,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-23":[],"2017-12-24":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":12,"nb_users":0,"max_actions":12,"sum_visit_length":480,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-25":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":3,"nb_actions":4,"nb_users":0,"max_actions":2,"sum_visit_length":7,"bounce_count":2,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2017-12-26":[],"2017-12-27":[{"label":"Desktop","nb_uniq_visitors":10,"nb_visits":10,"nb_actions":10,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":10,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"},{"label":"Smartphone","nb_uniq_visitors":7,"nb_visits":7,"nb_actions":7,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":7,"nb_visits_converted":0,"segment":"deviceType==smartphone","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/smartphone.png"},{"label":"Tablet","nb_uniq_visitors":5,"nb_visits":5,"nb_actions":5,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":5,"nb_visits_converted":0,"segment":"deviceType==tablet","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/tablet.png"},{"label":"Unknown","nb_uniq_visitors":4,"nb_visits":4,"nb_actions":4,"nb_users":0,"max_actions":1,"sum_visit_length":0,"bounce_count":4,"nb_visits_converted":0,"logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/unknown.png"}],"2017-12-28":[],"2017-12-29":[],"2017-12-30":[],"2017-12-31":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":1,"nb_actions":6,"nb_users":0,"max_actions":6,"sum_visit_length":41,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2018-01-01":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":2,"nb_actions":9,"nb_users":0,"max_actions":7,"sum_visit_length":103,"bounce_count":0,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2018-01-02":[],"2018-01-03":[{"label":"Desktop","nb_uniq_visitors":1,"nb_visits":3,"nb_actions":6,"nb_users":0,"max_actions":3,"sum_visit_length":250,"bounce_count":1,"nb_visits_converted":0,"segment":"deviceType==desktop","logo":"plugins\\/Morpheus\\/icons\\/dist\\/devices\\/desktop.png"}],"2018-01-04":[],"2018-01-05":[]}; </script>