aggretaing data from json objects and creating hierarchies

I have to create a tree structured table with some data given in the form of json array.

let us take an example array

array :
[
{ "continent": "Asia", "country":"India", "population": 100, "GDP":4},
{ "continent": "Asia", "country":"china", "population": 130, "GDP":20},
{ "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
{ "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
{ "continent": "Europe", "country":"France", "population": 4, "GDP":16},
{ "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
]

the table is like a tree which can be expanded or collapsed. let the tree be like,

    continent          country         population       GDP

    Asia           +                   250               25

    Europe         -                   11                52
                       UK              2                 15
                       France          4                 16
                       Germany         5                 21

on the above table we expanded Europe, in the below table we expand Asia.

    continent           country            population       GDP

    Asia           -                       250              25
                        India              100              4
                        China              130              20
                        Pakisthan          20               1

    Europe       +                         11               52

please help me in creating the table with aggregated values. Thanks :)

Answers


function showHide(){
  var td = this,
      tr = this.parentElement,
      next = td.nextElementSibling;
  if(tr.className == 'visible'){
    var rowSpan = td.rowSpan;
    td.oldRowSpan = rowSpan;
    td.rowSpan = next.rowSpan = 1;
    tr.className = 'collapsed';
    for(var i=1; i<rowSpan; ++i){
      tr = tr.nextElementSibling;
      tr.className = 'hidden';
    }
  }else{
    td.rowSpan = next.rowSpan = td.oldRowSpan;
    rowSpan = td.oldRowSpan;
    tr.className = 'visible';
    for(var i=1; i<rowSpan; ++i){
      tr = tr.nextElementSibling;
      tr.className = '';
    }
  }
}
var data = [
  { "continent": "Asia", "country":"India", "population": 100, "GDP":4},
  { "continent": "Asia", "country":"china", "population": 130, "GDP":20},
  { "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
  { "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
  { "continent": "Europe", "country":"France", "population": 4, "GDP":16},
  { "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
], obj = {};
for(var i=0; i<data.length; ++i) {
  var continent = data[i].continent,
      arr = obj[continent] = obj[continent] || [];
  arr.push([data[i].country,data[i].population,data[i].GDP]);   
}
var table = document.createElement('table'),
    thead = document.createElement('thead'),
    tbody = document.createElement('tbody'),
    tr = document.createElement('tr');
var keys = ['','Continent','Country','Population','GDP'];
for(var i=0; i<keys.length; ++i){
  var td = document.createElement('td');
  td.appendChild(document.createTextNode(keys[i]));
  tr.appendChild(td);
}
thead.appendChild(tr);
table.appendChild(thead);
for(var i in obj) {
  var dataArr = [];
  tr = document.createElement('tr'),
    td = document.createElement('td');
  td.rowSpan = obj[i].length + 1;
  td.onclick = showHide;
  tr.appendChild(td);
  td = document.createElement('td');
  td.appendChild(document.createTextNode(i));
  td.rowSpan = obj[i].length + 1;
  tr.appendChild(td);
  tbody.appendChild(tr);
  for(var j=0; j<obj[i].length; ++j){
    var subTr =  document.createElement('tr');
    for(var k=0; k<obj[i][j].length; ++k){
      td = document.createElement('td');
      if(k>0) dataArr[k] = (dataArr[k] || 0) + obj[i][j][k];
      td.appendChild(document.createTextNode(obj[i][j][k]));
      subTr.appendChild(td);
    }
    tbody.appendChild(subTr);
  }
  for(var j=0; j<dataArr.length; ++j){
    td = document.createElement('td')
    td.className = 'data-sum';
    if(dataArr[j]) td.appendChild(document.createTextNode(dataArr[j]));
    tr.appendChild(td);
  }
  tr.className = 'visible';
}
table.appendChild(tbody);
document.body.appendChild(table);
table {
  border-collapse: collapse;
}
thead {
  font-weight: bold;
  font-size: 120%
}
td {
  border: 2px solid black;
}
.hidden, .visible > .data-sum {
  display: none;
}
.collapsed > :first-child, .visible > :first-child {
  cursor: pointer;
}
.collapsed > :first-child:before {
  content: '[+]';
  font-family: monospace;
}
.visible > :first-child:before {
  content: '[-]';
  font-family: monospace;
}

You mention javascript in your tags, so I assume you need the answer in JS. I'm giving you keywords that you'll need to study up on.

First, declare the variable.

var regions = [
  { "continent": "Asia", "country":"India", "population": 100, "GDP":4},
  { "continent": "Asia", "country":"china", "population": 130, "GDP":20},
  { "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
  { "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
  { "continent": "Europe", "country":"France", "population": 4, "GDP":16},
  { "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
];

Then, you need something to hold the various answers:

var results = {}; // Note, this is an object. Not an array.

Next, loop over the array with standard loop processing. A for loop if you need to support older browsers, .forEach if you can only target newer ones.

With each loop, see if continent exists in results. If not, add the property with a value of 0.

Then just accumulate the GDP in results[<continent>]


Need Your Help

how to Insert data into a database by fetching data from another database?

c# asp.net sql vb.net crystal-reports

I have two database for example(A and B). I have already made a crystal report which take values from database 'B'. But now I want to upload this report to the Database 'A' with an unique id. When ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.