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!

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
– David Simpson, Commented Jul 3, 2017 at 17:40

flocks · Accepted Answer · 2017-07-03 18:13:51Z

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 3, 2017 at 18:13

flocks

2182 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

David Simpson Over a year ago

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?

flocks Over a year ago

Since the months are nested inside the years in byYearAndByMonth, you need to make a loop inside the loop. See the updated fiddle. 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 Over a year ago

@PeterSmith, I realize rendering nested object/array in reactjs can be a bit tricky for beginner. Here is an example. I hope it will help!

David Simpson Over a year ago

Awesome! Thanks for your help guys. I think I've got my head around it now :)

David Simpson Over a year ago

How would I then sort that data in descending order? eg. 2017 - July - June - March 2016 - December - November

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related