如何在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?

Answer 1

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> 

Answer 2

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.

Answer 3

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); 

Answer 4

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 . :)