Question

我试图遍历一个对象数组。每个对象包含一个每天一个对象。我试图看看数组捕获Object.key（forEach数组索引），并在键下我记录其中的每个值。

config :hello_phoenix, HelloPhoenix.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "admin",
  password: "******",
  database: "compose",
  hostname: "aws-us-east-1-portal.5.dblayer.com",
  port: 16786,
  pool_size: 10

这种工作但每天只记录一个值，因此forin循环只捕获一个值

  DOPeration:[

        {
          'Monday':{
            Closed:'Closed Today'
          }
        },
        { Tuesday:{
            Closed:'Closed Today'
          }
        },
        { Wednesday:{
            Closed:'Closed Today'
          }
        },
        { Thursday:{
            Closed:'Closed Today'
          }
        },
        { Friday:{
            Closed:'Closed Today'
          }
        },
        { Saturday:{
            Closed:'Closed Today'
          }
        },
        { Sunday:{
            Closed:'Closed Today'
          }
        }
        ]
export default class displayDay extends React.Component{
  render(){
    const thing = this.props.dates.map(function(sec,index) {
      var keyVal = sec[Object.keys(sec)]


        return(
        <div key = {index}>
          <h9>{Object.keys(sec)[0]}</h9>
        <div>
        {

          for (var variable in keyVal) {
            return(
              <p>{variable}:{keyVal[variable]}</p>
            )
          }

        }</div>
        </div>
        )


    })
  return(
    <div className='container'>
      <div className='box'>
        {thing}
      </div>

    </div>
      )
  }
}

Answer 1

您在定义keyVal时忘记拉实际键：

var keyVal = sec[Object.keys(sec)[0]]

如果没有[0]，您尝试将数组用作对象键。

修改

该数据不适合渲染UI。你最好编写一个函数将这些数据转换成更有用的东西，这样你就可以让你的渲染方法更加清晰。 Check this jsbin表示格式化功能。如果您使用的是es6，那么功能可以更加简洁。

Answer 2

奇怪的代码：D你只是试图为你的数据中的每个对象获取一个部分，对吧？试试这个

<div>
    {this.props.dates.map((item, idx) => {
        const day = Object.keys(item)[0];
        return <div key={idx}>
            <h4>{day}</h4>
            <p>{item[day].Closed}</p>
        </div>
    })}
</div>

渲染包含对象的对象数组

2 个答案: