处理来自 API 的数据以进行表格渲染答案

【问题标题】：Processing data from API for table rendering处理来自 API 的数据以进行表格渲染
【发布时间】：2017-12-27 07:14:32
【问题描述】：

我从 API 收到类似的信息：

"stats": [
    {
        "label": 2016,
        "stats": {
            "return": 4,
            "stddev": 4,
            "sharpe": 4,
            "maxddown": 4
        }
    },
    {
        "label": 2015,
        "stats": {
            "return": 5,
            "stddev": 5,
            "sharpe": 5,
            "maxddown": 5
        }
    },
    {
        "label": 2014,
        "stats": {
            "return": 6,
            "stddev": 6,
            "sharpe": 6,
            "maxddown": 6
        }
    }
]

我应该将数据转换为对象数组，用于在 Ember 应用程序中呈现表格。我不知道怎么...表格的最终数据应该是这样的：

const tableData = [
    {
        name: 'return',
        2016: 4,
        2015: 5,
        2014: 6
    }, {
        name: 'stddev',
        2016: 4,
        2015: 5,
        2014: 6 
    }, {
        name: 'sharpe',
        2016: 4,
        2015: 5,
        2014: 6  
    }, {
        name: 'maxddown',
        2016: 4,
        2015: 5,
        2014: 6  
    }
]

【问题讨论】：

标签： javascript arrays sorting object ember.js

【解决方案1】：

获取stats 的键并对其进行迭代。在迭代周期中，您需要遍历所有stats，使用选定的key 访问每个stats 的属性并创建您的对象。

const stats = [
    {
        "label": 2016,
        "stats": {
            "return": 4,
            "stddev": 4,
            "sharpe": 4,
            "maxddown": 4
        }
    },
    {
        "label": 2015,
        "stats": {
            "return": 5,
            "stddev": 5,
            "sharpe": 5,
            "maxddown": 5
        }
    },
    {
        "label": 2014,
        "stats": {
            "return": 6,
            "stddev": 6,
            "sharpe": 6,
            "maxddown": 6
        }
    }
];

const keys = Object.keys(stats[0].stats);

const mapped = keys.map(key => {

  const obj = { name: key };

  stats.forEach(item => {
     obj[item.label] = item.stats[key]; 
  });
  
  return obj;
});

console.log(mapped);

【讨论】：