Create a JSON array containing multiple objects and group their values by their respective names

Question

Create a JSON array containing multiple objects and group their values by their respective names

Working on a JavaScript project where I need to group JSON object values dynamically based on a specific key word in the array.

Each object in the array contains time values.

The length of the array, called time_entries, can vary.

This array can have one or multiple objects in it.

The goal is to group the objects based on the time: Hours, minutes, seconds.

{
    "activities": [
        {
            "name": "player one",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2019-09-30 15:19:43",
                    "hours": 01,
                    "minutes": 02,
                    "seconds": 11,
                    "start_time": "2019-09-30 14:17:58"
                },
                {
                    "days": 0,
                    "end_time": "2019-09-25 15:40:11",
                    "hours": 0,
                    "minutes": 20,
                    "seconds": 4,
                    "start_time": "2019-09-25 15:20:15"
                },
                {
                    "days": 0,
                    "end_time": "2019-09-25 16:10:15",
                    "hours": 0,
                    "minutes": 30,
                    "seconds": 4,
                    "start_time": "2019-09-25 15:40:11"
                },
               
#more objects can be added here

            ]
        },
        {
            "name": "player two",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2019-09-30 19:18:51",
                    "hours": 0,
                    "minutes": 0,
                    "seconds": 52,
                    "start_time": "2019-09-30 19:17:58"
                },

#more objects can be added here

            ]
        },
        {
            "name": "player three",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2019-09-30 19:19:09",
                    "hours": 0,
                    "minutes": 0,
                    "seconds": 58,
                    "start_time": "2019-09-30 19:18:51"
                },
                {
                    "days": 0,
                    "end_time": "2019-09-30 21:21:09",
                    "hours": 2,
                    "minutes": 1,
                    "seconds": 0,
                    "start_time": "2019-09-30 19:20:09"
                },

#more objects can be added here

            ]
        }
    ]
}

The desired output should look like this:

 [
        {
            "name": "player one",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2019-09-25 16:10:15",
                    "hours": 01,
                    "minutes": 50,
                    "seconds": 19,
                    "start_time": "2019-09-30 14:17:58"
                }
            ]
        },
        {
            "name": "player two",
            "time_entries": [
                {
                    "days": 0,
                    "end_time": "2019-09-30 19:18:51",
                    "hours": 0,
                    "minutes": 0,
                    "seconds": 52,
                    "start_time": "2019-09-30 19:17:58"
                }
            ]
        },
        {
            "name": "player three",
            "time_entries": [
                {
                    "days": 0,
                    "end_time":"2019-09-30 21:21:09",
                    "hours": 2,
                    "minutes": 1,
                    "seconds": 58,
                    "start_time": "2019-09-30 19:18:51"
                }
            ]
        }
]

javascript json

Answer 1

Answer №1

Here is a step-by-step guide on how to achieve this:

Begin by using the map() method to loop through the given activities and modify each activity's time_entries property accordingly.
The getTimeEntry() function accepts an array of time entries and calculates the earliest start time, latest end time, and total activity time in terms of days, hours, minutes, seconds.

let data = { "activities": [ { "name": "player one", "time_entries": [ { "days": 0, "end_time": "2019-09-30 15:19:43", "hours": 01, "minutes": 02, "seconds": 11, "start_time": "2019-09-30 14:17:58" }, { "days": 0, "end_time": "2019-09-25 15:40:11", "hours": 0, "minutes": 20, "seconds": 4, "start_time": "2019-09-25 15:20:15" }, { "days": 0, "end_time": "2019-09-25 16:10:15", "hours": 0, "minutes": 30, "seconds": 4, "start_time": "2019-09-25 15:40:11" } ] }, { "name": "player two", "time_entries": [ { "days": 0, "end_time": "2019-09-30 19:18:51", "hours": 0, "minutes": 0, "seconds": 52, "start_time": "2019-09-30 19:17:58" } ] }, { "name": "player three", "time_entries": [ { "days": 0, "end_time": "2019-09-30 19:19:09", "hours": 0, "minutes": 0, "seconds": 58, "start_time": "2019-09-30 19:18:51" }, { "days": 0, "end_time": "2019-09-30 21:21:09", "hours": 2, "minutes": 1, "seconds": 0, "start_time": "2019-09-30 19:20:09" } ] } ] };

let result = {};

result.activities = data.activities.map(item => {
  return {
    "name": item.name,
    "time_entries": [getTimeEntry(item.time_entries)]
  };
});

function getTimeEntry(timeEntries) {
  let earliestTime = timeEntries[0].start_time;
  let latestTime = timeEntries[0].end_time;

  // Find earliest start time and latest end time.
  timeEntries.forEach(entry => {
    if (new Date(entry.start_time) < new Date(earliestTime)) {
      earliestTime = entry.start_time;
    }

    if (new Date(entry.end_time) > new Date(latestTime)) {
      latestTime = entry.end_time;
    }
  });

  // Calculate total seconds.
  let seconds = timeEntries.reduce((totalSeconds, currentEntry) => {
    let seconds = 0;

    seconds += currentEntry.seconds;
    seconds += currentEntry.minutes * 60;
    seconds += currentEntry.hours * 60 * 60;
    seconds += currentEntry.days * 24 * 60 * 60;

    return totalSeconds + seconds;
  }, 0);

  // Convert total seconds to days, hours, minutes, and seconds.
  let days = Math.floor(seconds / (24 * 60 * 60));
  seconds = seconds % (24 * 60 * 60);
  let hours = Math.floor(seconds / (60 * 60));
  seconds = seconds % (60 * 60);
  let minutes = Math.floor(seconds / 60);
  seconds = seconds % 60;

  return {
    "start_time": earliestTime,
    "end_time": latestTime,
    "days": days,
    "hours": hours,
    "minutes": minutes,
    "seconds": seconds
  };
}

console.log(result);

Answer 2

Here is a step-by-step guide on how to achieve this:

Begin by using the map() method to loop through the given activities and modify each activity's time_entries property accordingly.
The getTimeEntry() function accepts an array of time entries and calculates the earliest start time, latest end time, and total activity time in terms of days, hours, minutes, seconds.

let data = { "activities": [ { "name": "player one", "time_entries": [ { "days": 0, "end_time": "2019-09-30 15:19:43", "hours": 01, "minutes": 02, "seconds": 11, "start_time": "2019-09-30 14:17:58" }, { "days": 0, "end_time": "2019-09-25 15:40:11", "hours": 0, "minutes": 20, "seconds": 4, "start_time": "2019-09-25 15:20:15" }, { "days": 0, "end_time": "2019-09-25 16:10:15", "hours": 0, "minutes": 30, "seconds": 4, "start_time": "2019-09-25 15:40:11" } ] }, { "name": "player two", "time_entries": [ { "days": 0, "end_time": "2019-09-30 19:18:51", "hours": 0, "minutes": 0, "seconds": 52, "start_time": "2019-09-30 19:17:58" } ] }, { "name": "player three", "time_entries": [ { "days": 0, "end_time": "2019-09-30 19:19:09", "hours": 0, "minutes": 0, "seconds": 58, "start_time": "2019-09-30 19:18:51" }, { "days": 0, "end_time": "2019-09-30 21:21:09", "hours": 2, "minutes": 1, "seconds": 0, "start_time": "2019-09-30 19:20:09" } ] } ] };

let result = {};

result.activities = data.activities.map(item => {
  return {
    "name": item.name,
    "time_entries": [getTimeEntry(item.time_entries)]
  };
});

function getTimeEntry(timeEntries) {
  let earliestTime = timeEntries[0].start_time;
  let latestTime = timeEntries[0].end_time;

  // Find earliest start time and latest end time.
  timeEntries.forEach(entry => {
    if (new Date(entry.start_time) < new Date(earliestTime)) {
      earliestTime = entry.start_time;
    }

    if (new Date(entry.end_time) > new Date(latestTime)) {
      latestTime = entry.end_time;
    }
  });

  // Calculate total seconds.
  let seconds = timeEntries.reduce((totalSeconds, currentEntry) => {
    let seconds = 0;

    seconds += currentEntry.seconds;
    seconds += currentEntry.minutes * 60;
    seconds += currentEntry.hours * 60 * 60;
    seconds += currentEntry.days * 24 * 60 * 60;

    return totalSeconds + seconds;
  }, 0);

  // Convert total seconds to days, hours, minutes, and seconds.
  let days = Math.floor(seconds / (24 * 60 * 60));
  seconds = seconds % (24 * 60 * 60);
  let hours = Math.floor(seconds / (60 * 60));
  seconds = seconds % (60 * 60);
  let minutes = Math.floor(seconds / 60);
  seconds = seconds % 60;

  return {
    "start_time": earliestTime,
    "end_time": latestTime,
    "days": days,
    "hours": hours,
    "minutes": minutes,
    "seconds": seconds
  };
}

console.log(result);

Create a JSON array containing multiple objects and group their values by their respective names

Answer №1

Similar questions

How can I pass a specific value, rather than the entire array, in a ReactJS dropdown menu?

Data loss in the array

Having difficulty executing the command 'npm install -g expo-cli'

Having issues with AngularJS ng-if when implemented within a Form

Analyzing the original data form versus the modified data

Extract the content of an element and incorporate it into a script (AddThis)

perform the directive function following the ng-cloak execution

Guide to delivering a PDF document from a controller

Utilizing Odoo Point of Sale feature on product selection

Manipulating a specific element within an ng-repeat in AngularJS without affecting the others

Mapping arguments as function values

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

Refreshing and enhancing Android contacts through the Expo project

Tips for running two elixir tasks consecutively?

Is there a way for me to extract the true text content that is concealed within the page source code?

Creating a simulated callback function using Jest with a promise

Avoid refreshing AJAX on browser back navigation

Webshot is unable to retain any images

Ways to alter the div post user authentication