CODEWITHSUNDEEP
underscore.js
davids12
davids12

Reputation: 323

How to handle JSON dates in underscore.js

How can I essentially query dates in underscore.js? I know I can't do a "between" clause, but see the below code as an example. My goal is to load the JSON data into a chart based on a user specified date range.

var testdata=[{"date": "1/8/2014", "y": 50, "z": 466, "a": 35},
                {"date": "1/9/2014", "y": 325, "z": 201, "a": 85},
                {"date": "1/10/2014", "y": 250, "z": null, "a": 40},
                {"date": "1/11/2014", "y": 125, "z": 500, "a": 60},
                {"date": "1/12/2014", "y": 50, "z": 466, "a": 35},
                {"date": "1/13/2014", "y": 325, "z": 201, "a": 85}
                ];

daterange = _.select(testdata, function(getdates){ return getdates between '1/9/2014' and '1/12/2014';});
console.log(daterange);

Update: I'm having some trouble getting my date callback to replace the "startDate" and "endDate" from Gruff Bunny's example. Any suggestions? 

var cb = function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + "]");

                    var testdata=[
                        {"date": "1/2/2014", "y": 250, "z": null, "a": 40},
                        {"date": "1/3/2014", "y": 125, "z": 500, "a": 60},
                        {"date": "1/4/2014", "y": 50, "z": 466, "a": 35},
                        {"date": "1/5/2014", "y": 325, "z": 201, "a": 85},
                        {"date": "1/6/2014", "y": 250, "z": null, "a": 40},
                        {"date": "1/7/2014", "y": 125, "z": 500, "a": 60},
                        {"date": "1/8/2014", "y": 50, "z": 466, "a": 35},
                        {"date": "1/9/2014", "y": 325, "z": 201, "a": 85},
                        {"date": "1/10/2014", "y": 250, "z": null, "a": 40},
                        {"date": "1/11/2014", "y": 125, "z": 500, "a": 60},
                        {"date": "1/12/2014", "y": 50, "z": 466, "a": 35}
                        ];

                    _.each(testdata, function(data){
                    var dateParts = data.date.split('/')
                    data.date = new Date(dateParts[2], dateParts[0] - 1, dateParts[1])
                    });

                    var startDate = new Date(2014,0,9) ;
                    var endDate = new Date(2014,0,12) ;

                    var requiredData = _.filter(testdata, function(data){
                        return data.date >= startDate && data.date <= endDate;
                    });

Upvotes: 4

Views: 4036

Answers (3)

aqm
aqm

Reputation: 3034

Would recommend the excellent library momentjs

http://momentjs.com/

http://momentjs.com/docs/#/parsing/string/

console.log(moment("1/8/2014").format());

Upvotes: 1

hendrikswan
hendrikswan

Reputation: 2341

You might also want to consider using a library like date.js for date related stuff.

A bit unrelated, but still relevant: I created a a screencast about massaging date based data with underscorejs for binding to a rickshaw chart, check it out if you want: http://tagtree.tv/d3-with-rickshaw-and-angular

Upvotes: 0

Gruff Bunny
Gruff Bunny

Reputation: 27976

Those dates aren't easy to work with so first convert them all to javascript dates:

_.each(testdata, function(data){
    var dateParts = data.date.split('/')
    data.date = new Date(dateParts[2], dateParts[0] - 1, dateParts[1])
});

and then extract the data you want using _.filter:

var startDate = new Date(2014,0,9) ;
var endDate = new Date(2014,0,12) ;

var requiredData = _.filter(testdata, function(data){
    return data.date >= startDate && data.date <= endDate;
});

Upvotes: 7

Related Questions