从json对象中共享数据并创建层次结构

Question

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

Answer 1

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

Answer 2

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