React loop over an object with array

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"
    ]
  }
]

I'm trying to map over this array of objects and display info as follows:

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

I'm having trouble looping over this data structure,

https://codesandbox.io/s/qzrvlvx9nj

Answer 1

Data is an array of objects, so first you need use map on it, after that to run loop on object property values, first use Object.keys or Object.entries to get the array, after that again use loop on available times array.

Write it like this:

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

Check the working code : https://codesandbox.io/s/24n524ynz0

Working Snippet:

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