오브젝트를 포함하는 오브젝트의 배열을 렌더링합니다.

Question

오브젝트의 배열을 반복하려고합니다. 각 객체는 매일 하나의 객체를 포함합니다. 메신저 배열을 잡아 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

이상한 코드 : 데이터의 각 개체에 대한 섹션 만 가져 오려고합니다. 맞습니까? this.props.dates.map = (함수 (초, 인덱스)이

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