Rendern Sie ein Array von Objekten, die ein Objekt enthalten

Question

Ich versuche, ein Array von Objekten zu durchlaufen. Jedes Objekt enthält ein Objekt für jeden Tag. Ich versuche, durch das Array zu suchen, fange den Object.key (forEach-Array-Index) und unter dem Schlüssel protokolliere ich jeden Wert darin.

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

diese Art gearbeitet, aber nur einen Wert innerhalb eines jeden Tag protokolliert, so dass nur die Forin Schleife

ein Wert fängt

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

Sie haben vergessen, den eigentlichen Schlüssel zu ziehen, wenn Sie keyval definiert:

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

Ohne die [0] Sie versuchen, ein Array als Objektschlüssel zu verwenden.

---

bearbeiten

Diese Daten sind für die Darstellung von UI nicht groß. Sie werden besser eine Funktion schreiben, um diese Daten in etwas Nützlicheres umzuwandeln, damit Sie Ihre Rendermethode sauberer halten können. Check this jsbin für eine Formatierungsfunktion. Wenn Sie es6 verwenden, kann diese Funktion prägnanter werden.

Answer 2

seltsamer Code: D Sie versuchen nur, einen Abschnitt für jedes Objekt in Ihren Daten zu bekommen, richtig? Versuchen Sie, diese

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