How to group and count JSON data by multiple keys and for the last 30 days in Javascript/jQuery

Question

I'm displaying a chart and I need to know how I can pull the specific data I need from the array.

I'm trying to create a chart of a JSON array based on three columns. Source, Campaign, and Date. Group them, count them and then display them in the chart. It seems to be tricker than I thought as the results I'm getting are NaN and nothing close to what I'm trying to succeed. This is the JSON array that I have

results = [{
    "utm-source": "direct",
    "utm-campaign": "nothing",
    "Date": "2019\/05\/10"
},
{
    "utm-source": "direct",
    "utm-campaign": "nothing",
    "Date": "2019\/08\/08"
},
{
    "utm-source": "direct",
    "utm-campaign": "nothing",
    "Date": "2019\/08\/09"
},
{
    "utm-source": "direct",
    "utm-campaign": "nothing",
    "Date": "2019\/08\/12"
},
{
    "utm-source": "google",
    "utm-campaign": "spring_sale",
    "Date": "2019\/08\/21"
},
{
    "utm-source": "facebook",
    "utm-campaign": "spring_sale",
    "Date": "2019\/08\/21"
},
{
    "utm-source": "email",
    "utm-campaign": "spring_sale",
    "Date": "2019\/08\/21"
}]

I have tried this but I'm nowhere near to the result I want:

var today = new Date();

var year = today.getFullYear();
var month = today.getMonth();
var date = today.getDate();

// build the last 30 days date array
var last30days = [];
for(var i=0; i<30; i++){
   var day = new Date(year, month, date - i);
   day = day.toISOString().split("T")[0].replace(/-/g,"/")
   last30days.push(day);
}
console.log(last30days);

var finalArray = [];
last30days.forEach(function(day,dayIndex){
   results.forEach(function(result,resultIndex) {
       var found = result.Date.indexOf(day);
       console.log(found);
       if(found == 0) {
           //console.log(result);
           finalArray[result.utm_source] += result.Lead_Source;
       } else {
           finalArray[result.utm_source] += "0";
       }
   });
});

The expected result should be this: https://i.stack.imgur.com/gbvMT.jpg Comparing this array to another array that has the last 30 days and displaying returning the number of leads for direct nothing or facebook spring_sale and for the days that there were no leads to return 0 and display that to the chart for the equivalent campaign and source that is displaying only once. Also, the expected array should be like this:

{
    "direct": {
        "nothing": {
            "2019/07/24" : "0",
            "2019/07/25" : "0",
            "2019/07/26" : "0",
            "2019/07/27" : "0",
            "2019/07/28" : "0",
            "2019/07/29" : "0",
            "2019/07/30" : "0",
            "2019/07/31" : "0",
            "2019/08/01" : "0",
            "2019/08/02" : "0",
            "2019/08/03" : "0",
            "2019/08/04" : "0",
            "2019/08/05" : "0",
            "2019/08/06" : "0",
            "2019/08/07" : "0",
            "2019/08/08" : "1",
            "2019/08/09" : "1",
            "2019/08/10" : "0",
            "2019/08/11" : "0",
            "2019/08/12" : "1",
            "2019/08/13" : "0",
            "2019/08/14" : "0",
            "2019/08/15" : "0",
            "2019/08/16" : "0",
            "2019/08/17" : "0",
            "2019/08/18" : "0",
            "2019/08/19" : "0",
            "2019/08/20" : "0",
            "2019/08/21" : "0",
            "2019/08/22" : "0"
        }
    },
    "google":{
        "spring_sale": {
            "2019/07/24" : "0",
            "2019/07/25" : "0",
            "2019/07/26" : "0",
            "2019/07/27" : "0",
            "2019/07/28" : "0",
            "2019/07/29" : "0",
            "2019/07/30" : "0",
            "2019/07/31" : "0",
            "2019/08/01" : "0",
            "2019/08/02" : "0",
            "2019/08/03" : "0",
            "2019/08/04" : "0",
            "2019/08/05" : "0",
            "2019/08/06" : "0",
            "2019/08/07" : "0",
            "2019/08/08" : "0",
            "2019/08/09" : "0",
            "2019/08/10" : "0",
            "2019/08/11" : "0",
            "2019/08/12" : "0",
            "2019/08/13" : "0",
            "2019/08/14" : "0",
            "2019/08/15" : "0",
            "2019/08/16" : "0",
            "2019/08/17" : "0",
            "2019/08/18" : "0",
            "2019/08/19" : "0",
            "2019/08/20" : "0",
            "2019/08/21" : "1",
            "2019/08/22" : "0"
        }
    },
    "facebook":{
        "spring_sale": {
            "2019/07/24" : "0",
            "2019/07/25" : "0",
            "2019/07/26" : "0",
            "2019/07/27" : "0",
            "2019/07/28" : "0",
            "2019/07/29" : "0",
            "2019/07/30" : "0",
            "2019/07/31" : "0",
            "2019/08/01" : "0",
            "2019/08/02" : "0",
            "2019/08/03" : "0",
            "2019/08/04" : "0",
            "2019/08/05" : "0",
            "2019/08/06" : "0",
            "2019/08/07" : "0",
            "2019/08/08" : "0",
            "2019/08/09" : "0",
            "2019/08/10" : "0",
            "2019/08/11" : "0",
            "2019/08/12" : "0",
            "2019/08/13" : "0",
            "2019/08/14" : "0",
            "2019/08/15" : "0",
            "2019/08/16" : "0",
            "2019/08/17" : "0",
            "2019/08/18" : "0",
            "2019/08/19" : "0",
            "2019/08/20" : "0",
            "2019/08/21" : "1",
            "2019/08/22" : "0"
        }
    }
}

Post the code that you attempted along with the expected output array. — Prerak Sola, Aug 22 '19 at 09:51

score 0 · Answer 1 · answered Aug 22 '19 at 10:00

If you only need to group by utm-source you could do

const counts = {};
results.forEach(r => {
  counts[r["utm-source"]] = (counts[r["utm-source"]] || 0) + 1;
});

Output would look like

{ direct: 4, google: 1, facebook: 1, email: 1 }

Similar to How to count duplicate value in an array in javascript, but with object instead of string arrays

How to group and count JSON data by multiple keys and for the last 30 days in Javascript/jQuery

1 Answers1