将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返回的网址位于 API 服务器上，我如何为每个logo添加新的label网址？

输出应该以这种格式显示

Answer 1

这些年来你只是迭代，但这些年是包含你的数据的数组。你只需要添加另一个循环。这是使用jQuery的$.each函数的问题，该函数将使用相同的函数循环遍历数组或对象属性。为了避免它，你应该尽可能使用原生循环。

＆＃13;

＆＃13;

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

＆＃13;

table { border-collapse: collapse }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我希望这些总和是正确的。我更喜欢vanilla，但你总是可以将创建DOM的部分重写为jQuery：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;