Question

data = [
  {
    "2017-08-09": [
      "09:00",
      "09:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "13:00",
      "13:30",
      "14:00",
      "14:30",
      "15:00",
      "15:30",
      "16:00",
      "16:30"
    ]
  }
]

我正在尝试映射这个对象数组并显示如下信息：

Date 2017-08-09 
available hours 
  09:00
  09:30
  10:00
       ...

我在循环这个数据结构时遇到了麻烦，

https://codesandbox.io/s/qzrvlvx9nj

Answer 1

数据是一个对象数组，所以首先需要在其上使用map，然后在对象属性值上运行循环，首先使用Object.keys或Object.entries来获取数组，之后再次使用在可用时间数组上使用循环。

像这样写：

{
    data.map((el,i) => (
        <div key={i}>
            Available Dates:
            {
                Object.entries(el).map(([key, value], j) => (
                    <div key={j}>
                        {key}
                        Available Times:
                        {
                            value.map(t => <div key={t}> {t} </div>)
                        }
                    </div>
                ))
            }
        </div>
    ))
}

检查工作代码：https://codesandbox.io/s/24n524ynz0

工作片段：

const data = [
  {
    "2017-08-09": [
      "09:00",
      "09:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "13:00",
      "13:30",
      "14:00",
      "14:30",
      "15:00",
      "15:30",
      "16:00",
      "16:30"
    ]
  }
];

const App = () => (
  <div>
    <h2>JS Map</h2>
    {
      data.map((el,i) => (
        <div key={i}>
          Available Date:
          {
            Object.entries(el).map(([key, value], j) => (
              <div>
                {key}
                Available Time:
                {
                  value.map(t => <div>{t}</div>)
                }
              </div>
            ))
          }
        </div>
      ))
    }
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'/>

Answer 2

我已更新您的链接。我没有使用lodash，只是嵌套map()次调用。我首先映射初始数组，并在每个对象中抓取该对象的所有键。之后，我通过对象的键进行映射，最后在每个日期的时间内映射一个map()。

您可以参考以下代码：

const data = [
  {
    "2017-08-09": [
      "09:00",
      "09:30",
      "10:00",
      "10:30",
      "11:00",
      "11:30",
      "13:00",
      "13:30",
      "14:00",
      "14:30",
      "15:00",
      "15:30",
      "16:00",
      "16:30"
    ]
  }
];

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>JS Map</h2>
        {
          data.map(item => {
            
            return Object.keys(item).map(date => {
              return (
                <div>
                  <h1>{date}</h1>
                  {item[date].map(time => {
                    return <h3>{time}</h3>
                  })}
                </div>
              )
            })
          })
        }
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

使用数组在对象上进行反应循环

2 个答案: