Group JSON Data in Jquery usinng Underscore.js

Question

I would like to format my JSON data to display Chart in my reporting templates.I want to produce a daily reporting chart with date wise Approved, Rejected and Pending data. My current JSON is:

json_data = '[
                    {"Approved":1,"updated_date":"2015-03-07"}, 
                    {"Approved":1,"updated_date":"2015-03-07"}, 
                    {"Rejected":1,"updated_date":"2015-03-07"}, 
                    {"Pending":1,"updated_date":"2015-03-07"},{"Approved":1,"updated_date":"2015-03-07"}
                ]';

I want to achieve this output

$data=  '[
{
 "date": "1 Mar",
 "approved": 0,
 "completed": 0,
 "rejected": 0
},
{
 "date": "2 Mar",
 "approved": 0,
 "completed": 0,
 "rejected": 0
},
{
 "date": "3 Mar",
 "approved": 9,
 "completed": 20,
 "rejected": 11
},
{
 "date": "4 Mar",
 "approved": 20,
 "completed": 50,
 "rejected": 30
},
{
 "date": "5 Mar",
 "approved": 40,
 "completed": 50,
 "rejected": 10
},
{
 "date": "6 Mar",
 "approved": 35,
 "completed": 70,
 "rejected": 20
},
{
 "date": "7 Mar",
 "approved": 50,
 "completed": 80,
 "rejected": 30
}];'

I want to display only last 7 days data report through CHART.

Viktor Bahtev · Accepted Answer · 2015-04-09 09:30:03Z

You should first filter initial data by 'updated_date' (when the date is including in last 7 days), then group by 'updated_date' and then aggregate all desired properties by groups. Using underscore this will look something like this:

var json_data = '[{"Approved":1,"updated_date":"2015-03-07"}, {"Approved":1,"updated_date":"2015-03-07"}, {"Rejected":1,"updated_date":"2015-03-07"}, {"Pending":1,"updated_date":"2015-03-07"}, {"Approved":1,"updated_date":"2015-03-07"}, {"Approved":1, "Rejected": 1, "updated_date":"2015-03-08"}, {"Pending":17,"updated_date":"2015-03-02"} ]';

var json = JSON.parse(json_data);
var today = new Date('2015-03-10'); // new Date();
var sevenDays = 7 * 24 * 60 * 60 * 1000;

var result = _.map(_.groupBy(_.filter(json, function (item) {
    var dateDiff = today.getTime() - new Date(item.updated_date).getTime();
    return (dateDiff >= 0 && dateDiff < sevenDays);
}), 'updated_date'), function (g, key) {
    var res = _.reduce(g, function (memo, item) {
        return {
            approved: memo.approved + (item.Approved | 0),
            completed: memo.completed + (item.Completed | 0),
            rejected: memo.rejected + (item.Rejected | 0),
            pending: memo.pending + (item.Pending | 0),
        };
    }, { approved: 0, completed: 0, rejected: 0, pending: 0 });

    res.date = key;

    return res;
});

Here is a Live demo in JsFiddle

For the sake of readability please use the good old for loops.

P.S. beware of JavaScript dates and time zones if you're doing this on client side.

Thanks Viktor! I also paste my code but your code gives better output.

user3172975 · Accepted Answer · 2015-04-09 11:16:10Z

0

function sum(numbers) {
return _.reduce(numbers, function(result, current) {
    if(_.isUndefined(current))
        return result;
    return result + parseFloat(current);
}, 0);
}
var result = _.chain(json_data)
        .groupBy("updated_date")
        .map(function(value, key) {
            return {
                updated_date: key,
                Approved: sum(_.pluck(value, "Approved")),
                Rejected: sum(_.pluck(value, "Rejected")),
                Pending: sum(_.pluck(value, "Pending"))
            }
        })
        .last(7)
        .value();

    console.log(JSON.stringify(result));

answered Apr 9, 2015 at 11:16

user3172975

496 bronze badges

Collectives™ on Stack Overflow

Group JSON Data in Jquery usinng Underscore.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related