The fetched sponsor is an array of JSON objects which need to be grouped based on the type of the sponsor which is done using the lodash library. How do we implement it?
Creating sponsor-list & sponsor-item components
We create two components sponsor-list which contains all the sponsors & sponsor-item which is used to render each sponsor.
Grouping the sponsors by type
The API response return an array of the sponsors of the event as :
This response is the list of all sponsors, which is not grouped by the type of the sponsor. We sort and group the array and return a JSON object in the sponsor-list component.
We use lodash orderBy to sort the sponsors by the level and groupBy to convert the array into an JSON object of the grouped sponsors. We compute the grouped object using ember computed property.
Rendering sponsors in public event route
The sponsor array is passed to the sponsors-list component where the sponsors are sorted and grouped. We pass each sponsor from the sponsorsGrouped to the sponsor-item component which renders the logo of the sponsor.
The outcome of this change on the Open Event Front-end now looks like this:
Thank you for reading the blog, you can check the source code for the example here.