渲染一個包含對象的對象數組

我試圖循環對象數組。每個對象每天包含一個對象。我試圖看看，雖然數組捕獲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僅環捉住一個值

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

來源

2017-01-29 GoyaKing

// const的事情= this.props.dates.map（功能（秒，索引）{// 變種KEYVAL =秒[Object.keys（秒）] //用於（VAR變量（KEYVAL））{// 的console.log（ 'KEYVAL'，KEYVAL）; // // 回報（ //

// {Object.keys(sec)[0]} //

{variable}:{keyVal[variable]}

//） //} // // }） – GoyaKing

你忘了拉實際鍵，當你定義KEYVAL內記錄一個值：

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

沒有[0]你試圖使用一個數組作爲對象鍵。

編輯

這些數據也不是很大渲染UI。你最好寫一個函數把數據轉換成更有用的東西，這樣你可以保持你的渲染方法更清潔。用於格式化功能的Check this jsbin。如果你使用的是es6，那麼函數可以得到更簡潔。

來源

2017-01-29 06:55:14 shadymoses

這是正確的，但它並沒有解決我的問題。仍然只記錄一個。我爲我的forin循環獲得意想不到的標記。有任何想法嗎？ – GoyaKing

編輯答案以提供不同的解決方案。在您的渲染功能中使用它之前，嘗試將您的數據轉換爲更有用的格式。 – shadymoses

奇怪的代碼：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>

來源

2017-01-29 08:19:16 NonPolynomial

渲染一個包含對象的對象數組

回答

相關問題