What is the best way to sort and organize this JSON data?

Question

What is the best way to sort and organize this JSON data?

There is an array of JSON objects named events that contains fields such as eventId, eventName, and the date of the event.

[{event1}, {event2}, {event3}];

The goal is to iterate through this array and filter out events that occur on the same day. The desired output should look like this:

"days": [
    {
        "date": "11-05-2015",
        "events": [
            {"eventId": 1, ...},
            {"eventId": 2, ...},
            {"eventId": 3, ...},
            {"eventId": 4, ...},
        ]
    },

What is the most efficient way to achieve this using JavaScript or Angular?

javascript angularjs json

Answer 1

Answer №1

To organize the events by date, create a new object where the dates are keys and the corresponding events are stored in arrays. Once you have mapped the dates to events, convert the map into an array with your preferred structure.

If the original data is stored in a variable named "events":

    var events  = [{event 1}, {event 2}...];
    var daysMap = {};
    var days = [];
    events.map(function(event) {
        if (days[event.dateofevent] === undefined) {
            days[event.dateofevent] = [];
        }
        days[event.dateofevent].push(event);
    });
    for (var day in daysMap) {
        days.push({
            date: day, 
            events: daysMap[day]
        });
    }

Answer 2

To organize the events by date, create a new object where the dates are keys and the corresponding events are stored in arrays. Once you have mapped the dates to events, convert the map into an array with your preferred structure.

If the original data is stored in a variable named "events":

    var events  = [{event 1}, {event 2}...];
    var daysMap = {};
    var days = [];
    events.map(function(event) {
        if (days[event.dateofevent] === undefined) {
            days[event.dateofevent] = [];
        }
        days[event.dateofevent].push(event);
    });
    for (var day in daysMap) {
        days.push({
            date: day, 
            events: daysMap[day]
        });
    }

Answer 3

Answer №2

Creating a dynamic shopping cart with AngularJS

<div ng-app>
    <span class="bold">Showing how to filter and sort items using Angular JS</span>
    <br /><br />
        <div ng-controller="ShoppingCartCtrl">        
            <div>Sort by: 
            <select ng-model="sortExpression">
                    <option value="Name">Name</option>
                    <option value="Price">Price</option>
                    <option value="Quantity">Quantity</option>
                </select>
            </div>
            <br />
            <div><strong>Filter Results</strong></div>
            <table>
                <tr>
                    <td>By Any: </td>
                    <td><input type="text" ng-model="search.$" /></td>
                </tr>
                <tr>
                    <td>By Name: </td>
                    <td><input type="text" ng-model="search.Name" /></td>
                </tr>
                <tr>
                    <td>By Price: </td>
                    <td><input type="text" ng-model="search.Price" /></td>
                </tr>
                <tr>
                    <td>By Quantity: </td>
                    <td><input type="text" ng-model="search.Quantity" /></td>
                </tr>
            </table>
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
                        <td>{{item.Name}}</td>
                        <td>{{item.Price | currency}}</td>
                        <td>{{item.Quantity}}</td>
                    </tr>
                </tbody>
            </table>
            <br />
</div>
</div>

Defining the AngularJS controller function

function ShoppingCartCtrl($scope)  {

        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

        $scope.mySortFunction = function(item) {
            if(isNaN(item[$scope.sortExpression]))
                return item[$scope.sortExpression];
            return parseInt(item[$scope.sortExpression]);
        }
}

Styling the elements with CSS

.bold { font-weight:bold; }

table td{
    padding: 10px;
}

table th{
    font-weight: bold;
    text-align: center;
}

Check out the demo here

Answer 4

Creating a dynamic shopping cart with AngularJS

<div ng-app>
    <span class="bold">Showing how to filter and sort items using Angular JS</span>
    <br /><br />
        <div ng-controller="ShoppingCartCtrl">        
            <div>Sort by: 
            <select ng-model="sortExpression">
                    <option value="Name">Name</option>
                    <option value="Price">Price</option>
                    <option value="Quantity">Quantity</option>
                </select>
            </div>
            <br />
            <div><strong>Filter Results</strong></div>
            <table>
                <tr>
                    <td>By Any: </td>
                    <td><input type="text" ng-model="search.$" /></td>
                </tr>
                <tr>
                    <td>By Name: </td>
                    <td><input type="text" ng-model="search.Name" /></td>
                </tr>
                <tr>
                    <td>By Price: </td>
                    <td><input type="text" ng-model="search.Price" /></td>
                </tr>
                <tr>
                    <td>By Quantity: </td>
                    <td><input type="text" ng-model="search.Quantity" /></td>
                </tr>
            </table>
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
                        <td>{{item.Name}}</td>
                        <td>{{item.Price | currency}}</td>
                        <td>{{item.Quantity}}</td>
                    </tr>
                </tbody>
            </table>
            <br />
</div>
</div>

Defining the AngularJS controller function

function ShoppingCartCtrl($scope)  {

        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

        $scope.mySortFunction = function(item) {
            if(isNaN(item[$scope.sortExpression]))
                return item[$scope.sortExpression];
            return parseInt(item[$scope.sortExpression]);
        }
}

Styling the elements with CSS

.bold { font-weight:bold; }

table td{
    padding: 10px;
}

table th{
    font-weight: bold;
    text-align: center;
}

Check out the demo here

What is the best way to sort and organize this JSON data?

Answer №1

Answer №2

Similar questions

Cordova Geolocation now displaying incorrect latitude and longitude values as NAN

Tips for creating a responsive Youtube embedded video

In what way can you dynamically set the displayName using a higher order component?

Tips for sending event and additional arguments to a click handler

Utilize Angular to transform items in a nested array into comma-delimited values prior to assigning them to a grid

Is the purpose of express.json() to identify the Request Object as a JSON Object?

MySQL Workbench refuses to import JSON files, displaying error code 1290

My string is being cut off due to the HTML value

What steps do I need to take in order to implement a functional pagination menu in Vue?

Live streaming updates directly from Firebase

Utilizing ng-repeat to loop through a div element that consists of various nested tags

Populate the JTable with SparQL query results in JSON string format

I developed a straightforward MVC application that sends an HttpGet request and delivers an array containing 7 randomly generated, unidentified numbers to the View. [RESOLVED

Arrange an array of objects based on boolean values first, followed by numerical values in JavaScript

Monitoring a specific property within an array of objects with AngularJS

What could be causing redux.props.reducer to return undefined?

Unusual actions exhibited by the fs.readdirSync function

Ways to retrieve the final appearance of element m in array n

Substitutions not functional when using SendGrid in conjunction with Firebase functions

Tips for creating emissiveMap lighting exclusively in dimly lit spaces using three.js