A guide on utilizing server-based data grouping and showcasing it in ag-grid within an angular environment

Is there a way to organize the data based on the server name, which is identified by the object key server?

The code snippet below illustrates the structure of the data:

    rowData = [
        {
          server: "Server 1",
          ping: "10 ms",
          dl: "50Mbit/s",
          ul: "50Mbit/s",
          ispcon: true,
          dateStart: "2019-10-12 09:00:00",
          datteEnd: "2019-10-12 09:05:000"
        },
      // more data entries for Server 1 and Server 2...
      ];

The desired output format should be as shown here:

[
{
 server: "Server 1",
 data: [
   // individual data objects for Server 1...
 ]
},
{
 server: "Server 2",
 data: [
   // individual data objects for Server 2...
 ]
}
]

The objective is to group the data according to their respective servers. For instance, all data related to "Server 1" should be grouped together.

To visualize this grouped data in ag-grid's master-detail display, you can refer to this link: https://stackblitz.com/edit/ag-grid-angular-hello-world-xabqct?file=src/app/app.component.ts

An example of the expected output format can be viewed here: https://i.sstatic.net/cYcRu.png

Thank you in advance!

Answer №1

Solution:

const connectionData = [
{
  server: "Server 1",
  ping: "10 ms",
  dl: "50Mbit/s",
  ul: "50Mbit/s",
  ispcon: true,
  dateStart: "2019-10-12 09:00:00",
  datteEnd: "2019-10-12 09:05:000"
},
{
  server: "Server 1",
  ping: "10 ms",
  dl: "50Mbit/s",
  ul: "50Mbit/s",
  ispcon: true,
  dateStart: "2019-10-12 09:00:00",
  datteEnd: "2019-10-12 09:05:000"
},
{...more data entries here}
]
;

const combinedResult = connectionData.reduce((acc, entry) => {
  if (acc.findIndex(a => a.server === entry.server) === -1) {
    acc.push({server: entry.server, data: []})
  }
  const currentIndex = acc.findIndex(a => a.server === entry.server)

  delete entry['server']
  acc[currentIndex].data.push(entry)

  return acc
}, [])

console.log(combinedResult)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

Can I include a different website within an Angular project?

I've recently completed an Angular project and now want to embed a page within another Angular page. Specifically, I'm looking to include www.yahoo.com in my Angular application. ...

Modify one specific variable within my comprehensive collection on Firebase Firestore

After clicking the button, I need to update a variable. The variable in question is "bagAmount" and it is stored in my firestore collection. Here is a link to view the Firestore Collection: Firestore Collection Currently, I am able to update one of the va ...

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

Guide to incorporating a defined quantity of elements into JavaScript arrays based on a certain condition

I am currently working on a task involving the selection of columns from a table, with a restriction of 20 elements. The objective is to select all items up to the specified limit. Current Status: 18/20 Next column contains 10 elements Clicked on "select ...

Uncertainty surrounding the concept of JavaScript objects

What is the reason for this not functioning properly? function displayValue(a,b){ this.a = a; this.b = b; $('p').text(a + " " + b); } var display = new displayValue(); display('1','2'); How does this still work ...

Guide on Redirecting Response to a File using Co-Request module with NodeJs

I am utilizing Co-Request from this repository to fetch a Zip file from a URL, and the code I have for fetching it is as follows: The current code works fine. However, I'm facing difficulty in saving the response Zip file to an actual file. var co = ...

How do I repeatedly display an HTML element using a loop in Typescript?

As a newcomer to Typescript, I am attempting to create a function that generates multiple buttons based on the data stored in an array. Initially, I tried using a for loop like this: splitLabels(Array: any){ if (typeof Array != "undefined& ...

trouble seeing images with an array input and ngFor in Angular

I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...

React Native Header Icon Not Showing on the Left Side

I'm brand new to react and currently working on a project where navigation is done through a hamburger menu. I haven't encountered any errors in my code, but for some reason, the hamburger menu icon isn't displaying as expected. Interestingl ...

Execute a chain of consecutive HTTP requests and receive an Observable in response

I am currently working on two observable request functions that need to run sequentially in order for the desired outcome. Although it is functioning, I am facing an issue where the print function needs to be executed after the newOrder api call and return ...

Connecting a JavaScript variable

Is it possible to include a JavaScript variable in a link? I've tried the code below but it just shows a blank page. The viewData.php file will contain PHP GET Variables used to retrieve data based on the period and type, which determine whether renta ...

Ways to adjust the properties within a type that are nested

I'm looking to modify a specific type in my code while retaining the other properties. Can anyone help? type Foo = { a: { b: { c: string[] ...rest } ...rest } ...rest } Is there a way to change the type of a.b.c without ...

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, wh ...

Adjusting the line width and incorporating arrow points into AxesHelper in Three.js

I have successfully implemented axes using AxesHelper https://i.sstatic.net/gYCKW.png Currently, I am looking to enhance the width of the axes lines and incorporate arrow points. Since I am new to three.js, I could really use some guidance on how to ach ...

The jQuery method .find() is unable to locate the <option> tag and behavior unpredictably

Currently, I am working on a webpage that features a table with filtering capabilities using jQuery. The filtering functionality is achieved through a Bootstrap 4 dropdown menu where each option is assigned a specific value: <select id="inputState& ...

Retrieving a specific key-value pair from an object within a JavaScript array

Looking to extract a specific value from an array of objects using array.map? Check out the code snippet below: let balanceInfo = students.map((student) => { if (typeof(student) === Object){ let balance = student.balance; return balanc ...

Troubleshooting Angular 7 Build Failure: Missing Typescript .d.ts Declaration Files for Ahead-of-Time Compilation

I have encountered difficulties in building my Angular 7 application after upgrading from v6. When I use ng build, everything runs smoothly. However, when I try either ng serve --aot, ng build --aot, or ng build --prod (which also includes aot), an error ...

"Encountering issue with auto-import suggestions failing to appear in VS Code version 1.88.0

After installing the necessary libraries for MUI, I encountered an issue where basic components like Typography were not showing up in intellisense. Instead, it was displaying @mui/icons-material. You can view screenshots below: https://i.stack.imgur.com/ ...

How to Implement a Pop-up Modal in Angular Using TypeScript

Looking to implement a popup window that activates when a specific button is clicked: <a (click)="open()" class='btn btn-primary m-r-5px'> <span class='glyphicon glyphicon-eye-open'></span> View </a> Utilize ...