CODEWITHSUNDEEP
javascriptjqueryjson
Darren
Darren

Reputation: 2290

Format JSON data to table

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

Example

Upvotes: 0

Views: 97

Answers (2)

bigless
bigless

Reputation: 3091

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>

Upvotes: 0

synthet1c
synthet1c

Reputation: 6282

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>

Upvotes: 1

Related Questions