How Can I Merge Key and Add Up Their Values in Javascript?

Question

So when I GET my data back from the database I get this:

{
"times": [
    {
        "userName": "jon",
        "gameName": "halo",
        "time": "00.00.06"
    },
    {
        "userName": "jon",
        "gameName": "call of duty",
        "time": "00.00.05"
    },
    {
        "userName": "cody",
        "gameName": "thing1",
        "time": "00.00.07"
    },
    {
        "userName": "jon",
        "gameName": "war game",
        "time": "00.00.08"
    },
    {
        "userName": "jon",
        "gameName": "a game 22",
        "time": "00.00.08"
    },
    {
        "userName": "jon",
        "gameName": "monster",
        "time": "00.00.05"
    },
    {
        "userName": "jon",
        "gameName": "call of duty",
        "time": "00.00.06"
    },
    {
        "userName": "jon",
        "gameName": "war game",
        "time": "00.00.03"
    },
    {
        "userName": "guy",
        "gameName": "game1",
        "time": "00.00.03"
    },
    {
        "userName": "fun",
        "gameName": "My Game",
        "time": "00.00.05"
    },
    {
        "userName": "jon",
        "gameName": "Horizon: Zero Dawn",
        "time": "00.00.10"
    },
    {
        "userName": "jon",
        "gameName": "Horizon: Zero Dawn",
        "time": "00.02.10"
    },
    {
        "userName": "jon",
        "gameName": "Paragon",
        "time": "00.00.07"
    },
    {
        "userName": "jon",
        "gameName": "Paragon",
        "time": "00.00.11"
    },
    {
        "userName": "jon",
        "gameName": "halo",
        "time": "00.00.05"
    }
]

}

I want to be able to sum up all "times" for each game and display it as such: "GameName": "All times summed up for specific game"

Is there any way to do this?

WHat is the expected out? It is not possible to understand from the question — brk
– brk, Commented Mar 23, 2017 at 5:08

Apoorv Joshi · Accepted Answer · 2017-03-23 05:33:50Z

You can use lodash to get desired output.

const obj = {
"times": [
    {
        "userName": "jon",
        "gameName": "halo",
        "time": "00.00.06"
    },
    {
        "userName": "jon",
        "gameName": "call of duty",
        "time": "00.00.05"
    },
    {
        "userName": "cody",
        "gameName": "thing1",
        "time": "00.00.07"
    },
    {
        "userName": "jon",
        "gameName": "war game",
        "time": "00.00.08"
    },
    {
        "userName": "jon",
        "gameName": "a game 22",
        "time": "00.00.08"
    },
    {
        "userName": "jon",
        "gameName": "monster",
        "time": "00.00.05"
    },
    {
        "userName": "jon",
        "gameName": "call of duty",
        "time": "00.00.06"
    },
    {
        "userName": "jon",
        "gameName": "war game",
        "time": "00.00.03"
    },
    {
        "userName": "guy",
        "gameName": "game1",
        "time": "00.00.03"
    },
    {
        "userName": "fun",
        "gameName": "My Game",
        "time": "00.00.05"
    },
    {
        "userName": "jon",
        "gameName": "Horizon: Zero Dawn",
        "time": "00.00.10"
    },
    {
        "userName": "jon",
        "gameName": "Horizon: Zero Dawn",
        "time": "00.02.10"
    },
    {
        "userName": "jon",
        "gameName": "Paragon",
        "time": "00.00.07"
    },
    {
        "userName": "jon",
        "gameName": "Paragon",
        "time": "00.00.11"
    },
    {
        "userName": "jon",
        "gameName": "halo",
        "time": "00.00.05"
    }
]};
const times = _.groupBy(obj.times, "gameName");
let game_times = {};
for(key in times){
  game_times[key] = _.reduce(times[key], (sum, time)=> {
    time = time.time.split(".");
    sum = sum.split(".");
    let total = "";
    let ss = parseInt(sum[2]) + parseInt(time[2]);
    let mm = parseInt(sum[1]) + parseInt(time[1]);
    let hh = parseInt(sum[0]) + parseInt(time[0]);
    mm += parseInt(ss / 60);
    hh += parseInt(mm / 60);
    ss = ss % 60;
    return hh + "." + mm + "." + ss;
  },"00.00.00");
}
console.log(game_times);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

nraduka · Accepted Answer · 2017-03-23 05:18:58Z

0

Loop through your array and access the time property on each item then just add each amount.

Something similar to this

var total;
for (var i = 0; i < times.length; i++) {
    var itemTime = times[i].time;
    //parse time into int or date before adding otherwise it'll concatenate the string 
    total += itemTime;

}

Then retrieve the element in which you want to display the time and s set the value

  var element = document.getElementById("idOfElementToDisplayTotalTime");
   element.innerHTML = "All times summed: " + total;

Hope that helps or at least points you in the right direction. Sorry for any typos and laziness as I typed this up on my phone.

answered Mar 23, 2017 at 5:18

nraduka

1392 silver badges7 bronze badges

Comments

Arnelle Balane · Accepted Answer · 2017-03-23 05:31:35Z

You can use Javascript's Array.prototoype.reduce method like so:

const gameTimes = data.times.reduce(function(totalTimes, item) {
    if (!totalTimes.hasOwnProperty(item.gameName)) {
        totalTimes[item.gameName] = 0;
    }
    totalTimes[item.gameName] += item.time;
    // you'll notice that I just directly added the time above, but your time
    // is formatted as e.g. "00.00.10". You'll have to come up with a way to
    // add times that are formatted in that way. The previous line just shows
    // where you should update the total time. :)
    return totalTimes;
}, {});

/*
gameTimes => {
    "Call of Duty": "00.00.10",
    "Horizon: Zero Dawn": "00.10.00",
    ...
}
*/

This will result into a new object whose keys are the names of the games and the values are the total times. As noted in my comment in the code snippet, you'll have to find a way to add the times based on your time format which looks like 00.00.10. :)

Alex Young · Accepted Answer · 2017-03-23 15:21:41Z

0

This is a perfect situation for a reducer function. I've added a runnable snippet below but the relevant code is:

const parseSeconds = timeStr => {
    const regex = /(\d\d)\.(\d\d)\.(\d\d)/;
    const [original, hours, mins, secs] = regex.exec(timeStr);
    return (3600 * hours) + (60 * mins) + Number(secs);
}

const r = data.times
.map(({ gameName, time }) => ({
    gameName,
    time: parseSeconds(time)
}))
.reduce((results, { gameName, time }) => {
    if (!results.hasOwnProperty(gameName)) {
        results[gameName] = 0;
    }
    results[gameName] += time;
    return results;
}, {});

const data = {
	"times": [
{
    "userName": "jon",
    "gameName": "halo",
    "time": "00.00.06"
},
{
    "userName": "jon",
    "gameName": "call of duty",
    "time": "00.00.05"
},
{
    "userName": "cody",
    "gameName": "thing1",
    "time": "00.00.07"
},
{
    "userName": "jon",
    "gameName": "war game",
    "time": "00.00.08"
},
{
    "userName": "jon",
    "gameName": "a game 22",
    "time": "00.00.08"
},
{
    "userName": "jon",
    "gameName": "monster",
    "time": "00.00.05"
},
{
    "userName": "jon",
    "gameName": "call of duty",
    "time": "00.00.06"
},
{
    "userName": "jon",
    "gameName": "war game",
    "time": "00.00.03"
},
{
    "userName": "guy",
    "gameName": "game1",
    "time": "00.00.03"
},
{
    "userName": "fun",
    "gameName": "My Game",
    "time": "00.00.05"
},
{
    "userName": "jon",
    "gameName": "Horizon: Zero Dawn",
    "time": "00.00.10"
},
{
    "userName": "jon",
    "gameName": "Horizon: Zero Dawn",
    "time": "00.02.10"
},
{
    "userName": "jon",
    "gameName": "Paragon",
    "time": "00.00.07"
},
{
    "userName": "jon",
    "gameName": "Paragon",
    "time": "00.00.11"
},
{
    "userName": "jon",
    "gameName": "halo",
    "time": "00.00.05"
}
]
};

const parseSeconds = timeStr => {
	const regex = /(\d\d)\.(\d\d)\.(\d\d)/;
	const [original, hours, mins, secs] = regex.exec(timeStr);
	return (3600 * hours) + (60 * mins) + Number(secs);
}

const r = data.times
.map(({ gameName, time }) => ({
gameName,
time: parseSeconds(time)
}))
.reduce((results, { gameName, time }) => {
if (!results.hasOwnProperty(gameName)) {
	results[gameName] = 0;
}
results[gameName] += time;
return results;
}, {});

console.log(r);

edited Mar 23, 2017 at 15:21

answered Mar 23, 2017 at 5:28

Alex Young

4,0391 gold badge19 silver badges35 bronze badges

3 Comments

Apoorv Joshi Over a year ago

You're missing games which are not repeated in the array.

Alex Young Over a year ago

I don't think I am - if you run the snippet is that not the expected output?

Apoorv Joshi Over a year ago

I don't see ['paragon','horizon'..etc] in your output.

Collectives™ on Stack Overflow

How Can I Merge Key and Add Up Their Values in Javascript?

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related