Question

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

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

＆＃34; **＆＃34;将是一个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/

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

1 个答案: