Format JSON data to table

Question

Need help mapping JSON to display correctly.

If I am using JSON that for example returns as

{"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":[]}

How can I display in a table foreach label the sum of all values of all dates? For example

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

Here is my current JS but I am lost mapping this further.

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

Also, because the logo returned URL is on the API server, how can I also include a new logo URL for each label ?

Output should appear somewhat in this format

Answer 1

You were only iterating over the years, but the years are arrays that contain your data. You just needed to add another loop. This is a problem with using jQuery's $.each function which will loop over either arrays or object properties with the same function. to avoid it you should use the native loops where possible.

 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

I hope that these sums are correct. I prefer vanilla, but you can always rewrite part of creating DOM to 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>