How do I sort and display a React array by year and month?

Question

I'm fairly new to React. Basically I'm trying to display a table of receipts with the following attributes for each receipt:

{
  date: '2017-07-03',
  description: 'Receipt description,
  amount: 300
}

I'm trying to split and order the receipts into sections as follows:

2017
  July

  03 Jul | Receipt Description | £300.00
  ------ | ------------------- | -------
  01 Jul | Receipt Description | £20.00

  May

  03 May | Receipt Description | £300.00
  ------ | ------------------- | -------
  01 May | Receipt Description | £20.00

2016
  ...

I can easily map over the objects and sort the by date but can't figure out how to split them into the year and month sections. Any guidance would be appreciated greatly!

Possible duplicate of [Sort a string date array](https://stackoverflow.com/questions/30691066/sort-a-string-date-array) — Chris, Jul 03 '17 at 17:28
Hi @Chris thanks for your help. I've already managed to sort the data by date but I'm not sure how to split it into sections so I can display headers with the year and month and then a table with the corresponding receipts as per the diagram in my initial post. — David Simpson, Jul 03 '17 at 17:40

score 2 · Accepted Answer · answered Jul 03 '17 at 18:13

2

You could do something like that:

var sorted = data.sort(function(a, b) {
    return new Date(a.date) - new Date(b.date);
});

var byYearAndByMonth = {};

_.each(sorted, function(item) {
    var year = item.date.substring(0,4)
    var month = item.date.substring(5,7)

    if (typeof byYearAndByMonth[year] === "undefined") {
            byYearAndByMonth[year] = {};
    }

    if (typeof byYearAndByMonth[year][month] === "undefined") {
        byYearAndByMonth[year][month] = [];
    }

    byYearAndByMonth[year][month].push(item);
 });

First you sort the array, then you loop over the sorted array and build an object index by year an month.

Then to map over the object in your render() method you'll have to use Object.keys

See this jsfiddle

answered Jul 03 '17 at 18:13

flocks

218
2
13

Thanks @flocks! I've got the sorted output now but when I map over byYearAndByMonth I can only return a list of years. How do I get at the underlying data for each year and pass it to a component's props? – David Simpson Jul 03 '17 at 19:49
Since the months are nested inside the years in `byYearAndByMonth`, you need to make a loop inside the loop. See the updated [fiddle](https://jsfiddle.net/a1xzLmd5/2/). I'd say you pass the whole `byYearAndByMonth` to your component as a prop, and the inside the component's `render()` you loop (twice) over the object. – flocks Jul 03 '17 at 20:02
@PeterSmith, I realize rendering nested object/array in reactjs can be a bit tricky for beginner. Here is an [example](https://jsfiddle.net/69z2wepo/82134/). I hope it will help! – flocks Jul 03 '17 at 20:34
Awesome! Thanks for your help guys. I think I've got my head around it now :) – David Simpson Jul 03 '17 at 21:34
How would I then sort that data in descending order? eg. 2017 - July - June - March 2016 - December - November – David Simpson Jul 04 '17 at 08:12

How do I sort and display a React array by year and month?

1 Answers1