循环遍历 JavaScript 对象，但保留键和值

Question

var data = {
  2016-09-24: {
    0: {amount: 200, id: 2},
    1: {...}
  },
  2016-09-25: {
    0: {amount: 500, id: 8},
    1: {...}
  }
}

我想在如下视图中表示上述数据：

"**" 将是一个带有 card 类的 div：

*****************************************
* <h2>2016-09-24</h2>                   *
*                                       *
* <li>amount: 200</li>                  *
* <li>amount: 40</li>                   *
*                                       *
*****************************************

*****************************************
* <h2>2016-09-25</h2>                   *
*                                       *
* <li>amount: 500</li>                  *
* <li>amount: 90</li>                   *
*                                       *
*****************************************

我还没有到达布局，但卡在了循环中。我正在使用 React es6：

dailySales(){
  Object.keys(data).forEach(function(key) {
    var dates = key;
    var val = data[key];

    let sales = val.map(function(s, i) {
      //console.log(s.amount);
    });
  });
}

上面注释掉的console.log 将返回所有amount。如何用日期（键）分割每个值？这个问题类似to this one。

Answer 1

用《盗梦空间》中莱昂纳多·迪卡普里奥的话来说，“我们需要更深入”

您非常接近并且在正确的轨道上。您需要再次遍历嵌套对象，然后您将获得所需的内容：

Object.keys( data ).map( function( date, i ) {

    // here you have the date
    return (
        <div key={ i }>
            <h1>{ date }</h1>
            { Object.keys( data[ date ] ).map( function( item, j ) {
                // and here you have the item by its key
                var rowItem = data[date][item];
                return (
                    <p key={ rowItem.id }>Amount: { rowItem.amount }</p>
                );
            })}
        </div>
    );

});

https://jsfiddle.net/64s0yvvz/1/