オブジェクトを含むオブジェクトの配列をレンダリングします。

Question

オブジェクトの配列をループしようとしています。各オブジェクトには、毎日1つのオブジェクトが含まれています。私は配列がObject.key（forEach配列インデックス）をキャッチして見てみると、キーの下にすべての値を記録します。

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> 
    ) 
    } 
} 

のこの種働いだけforinループが唯一あなたがKEYVALを定義したときは、実際のキーを引くのを忘れて

// const thing = this.props.dates.map(function(sec,index) { 
// var keyVal = sec[Object.keys(sec)] 
// for (var variable in (keyVal)) { 
//  console.log('keyVal',keyVal); 
// 
//  return(
//  <div key = {index}> 
//  <h9>{Object.keys(sec)[0]}</h9> 
//  <p>{variable}:{keyVal[variable]}</p> 
//  </div> 
// ) 
// } 
// 
// }) 

Answer 1

つの値をキャッチして、毎日の中に一つの値をログに記録：

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

[0]がないと、配列をオブジェクトキーとして使用しようとしています。

---

編集

そのデータは、UIをレンダリングするための素晴らしいではありません。そのデータをより便利なものに変換する関数を作成して、レンダリングメソッドをもっときれいに保つことができます。書式設定機能の場合はCheck this jsbinです。 es6を使用している場合、その機能はより簡潔になります。

Answer 2

奇妙なコード：データ内の各オブジェクトのセクションを取得しようとしていますか？ （VARに対する //この

<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>