將API中的JSON數據轉換爲有用的格式？

Question

我已經在這個格式返回指標數據的API：

[ 
    { 
      "concept": "population", 
      "year": 2012, 
      "value": 9.5, 
      "country-name": "Sweden", 
    }, 
    { 
      "concept": "education", 
      "year": 2012, 
      "value": 12, 
      "country-name": "Sweden", 
    }, 
    { 
      "concept": "population", 
      "year": 2012, 
      "value": 5, 
      "country-name": "Norway", 
    }, 
    { 
      "concept": "eduction", 
      "year": 2012, 
      "value": 12, 
      "country-name": "Norway", 
    } 
] 

在此基礎上，我通常需要組這個由國家和年份要達到這樣的：由

var data = [ 
    {id : Sweden, population : 9.5, education: 12}, 
    {id : Norway, population : 5, education: 12}, 
] 

或者只是國家和年份值作爲數組：

var data = [ 
    {id : Sweden, values : [ { year : 2012, population : 9.5, education: 12 }, {...} ]}, 
    {id : Norway, values : [ { year : 2012, population : 5, education: 12 }, {...} ]}, 
] 

1. 什麼JS庫可以幫助管理這些常見的數據轉換？
2. 你能提供一個上面的例子（使用庫或香草js）嗎？

Answer 1

你可以自己做，只是想迭代並創建你需要什麼，像

var data = []; 

json.forEach(function(item) { 
    var country = item['country-name'], 
     match = false, 
     obj  = {} 

    data.forEach(function(dataItem, i) { 
     if (dataItem.id === country) { 
      match = true; 
      obj = data[i]; 
     } 
    }); 

    obj.id = country; 
    obj[item.concept] = item.value; 

    if (!match) data.push(obj) 
}); 

FIDDLE

Answer 2

您可以使用D3。 d3.nest和Array.prototype.reduce。該代碼是聲明性的，易於維護。

var rawData = [ 
 
    { 
 
    "concept": "population", 
 
    "year": 2012, 
 
    "value": 9.5, 
 
    "country-name": "Sweden", 
 
    }, 
 
    { 
 
    "concept": "education", 
 
    "year": 2012, 
 
    "value": 12, 
 
    "country-name": "Sweden", 
 
    }, 
 
    { 
 
    "concept": "population", 
 
    "year": 2012, 
 
    "value": 5, 
 
    "country-name": "Norway", 
 
    }, 
 
    { 
 
    "concept": "eduction", 
 
    "year": 2012, 
 
    "value": 12, 
 
    "country-name": "Norway", 
 
    } 
 
]; 
 

 
var data = d3.nest() 
 
    .key(function(d) 
 
    { 
 
    return d['year']; 
 
    }) 
 
    .key(function(d) 
 
    { 
 
    return d['country-name']; 
 
    }) 
 
    .rollup(function(group) 
 
    { 
 
    return group.reduce(function(result, d) 
 
    { 
 
     result[d['concept']] = d['value']; 
 
     return result; 
 
    }, {}); 
 
    }) 
 
    .entries(rawData); 
 

 
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 3

您可能會發現一個物體更容易使用比陣列：

var data = {}; 
indicatordata.forEach(function(item){ 
    var country = item['country-name']; 
    var year = item.year; 
    data[country] = data[country] || {id: item['country-name'], values: {}}; 
    var values = data[country].values; 
    values[year] = values[year] || {}; 
    values[year][item.concept] = item.value; 
});