React : render over an associative array

Question

I've got an associative array like this:

const data = []
data["01/01/2021"] = [1, 2, 3]
data["01/02/2021"] = [4, 5, 6]
data["01/03/2021"] = [7, 8, 9]

I've tried something like this :

return(
  {data.map(d => <tr>{d // some stuff here to access the correct item, it's typed}</tr>}
)

But I can't do that on an a associative array I think. I've been thinking should I use a Map() instead, because it's key / value collection, I only need the key to be sorted in the correct way, I think I can do that even on a Map() ?

Thank you for your messages, I'm on this for a while now...

There is nothing in the ouput, I've put a break point it's not going inside the loop, plus I think I can't use the map() function this way on an associative array ? — Antoine, Jul 18 '21 at 11:39
JavaScript doesn't have associative arrays. See https://stackoverflow.com/a/37516003/3903374. What would you like the output to be? Should it include both the date and the values? — Rick Hitchcock, Jul 18 '21 at 11:40
I see this is the array syntax to create object... Yes I need to loop over the dates, and then loop over the items in the coresponding array. In the page I want a first row with the date, then a new row for each element of it's array, then a new row for the next date etc. I come from Java, I think a Map() would be appropriate, then I could loop over it with a myDataMap.forEach((values, key) => {return(blabla)})); ? — Antoine, Jul 18 '21 at 11:45
how we sort this Business Toolkit: list: (6) [{…}, {…}, {…}, {…}, {…}, {…}] order: "2" [[Prototype]]: Object Go Digital: list: (4) [{…}, {…}, {…}, {…}] order: "5" [[Prototype]]: Object Home: list: (6) [{…}, {…}, {…}, {…}, {…}, {…}] order: "1" [[Prototype]]: Object MarketPlace: {list: Array(5), order: '3'} SME Community: {list: Array(5), order: '4'} — Ani David, Jan 18 '22 at 11:36

Rick Hitchcock · Answer 1 · 2021-07-18T12:06:36.220

JavaScript doesn't support associative arrays. See https://stackoverflow.com/a/37516003/3903374

It's best if you declare data as an object to avoid confusion when maintaining the program:

const data = {};

You can iterate over the data object's keys.

Note that an object's keys are not guaranteed to be in any order, even if you specify then in array syntax like you've done. So you'll need to sort them if you want them ordered by date.

This puts all the dates with their data on separate rows, sorted by date:

Object.keys(data)
  .sort((date1, date2) => new Date(date1) - new Date(date2))
  .map(date => (
     <tr>
       <td>{date}</td>
       {data[date].map(d => <td>{d}</td>)}
     </tr>
   ))

Based on your comment that each data point should be on a separate row, this should do it:

Object.keys(data)
  .sort((date1, date2) => new Date(date1) - new Date(date2))
  .map(date => (
     <>
       <tr><td>{date}</td></tr>
       {data[date].map(d => <tr><td>{d}</td></tr>)}
     </>
   ))

React : render over an associative array

1 Answers1