Export row with object from PrimeNG Turbo table

Currently, I am faced with the task of exporting data from a PrimeNG Turbo table to a CSV file. The challenge lies in the fact that the 'rows' variable in the code snippet below is an array of objects which are displayed in the table body using ngIf based on their keys. While displaying them poses no problem, attempting to export to CSV results in the object being shown in the cell rather than its properties. Is there any way to extract the object property using datatable.exportCSV()?

Here is a snippet of my work:

 <p-table #dt [columns]="cols" [value]="rows" selectionMode="multiple" [(selection)]="selectedResults">

<ng-template pTemplate="caption">
Test Set - {{testsetid}}
<div class="ui-helper-clearfix">
  <button type="button" pButton icon="fa fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>
  <button type="button" pButton icon="fa fa-file" iconPos="left" label="Selection Only" (click)="dt.exportCSV({selectionOnly:true})" style="float:right"></button>
</div>

 </ng-template>
 <ng-template pTemplate="header" let-columns>
<tr>
  <th *ngFor="let col of cols">
    {{col.header}}
  </th>
  </tr>
 </ng-template>
 <ng-template pTemplate="body" let-row let-columns="cols">
   <tr [pSelectableRow] = "row">
  <td *ngFor="let col of cols" [ngStyle]="{'background-color': getColor(row[col.field]['status'])}">
    <span *ngIf="col.field == 'script_name'" >{{row[col.field]}}</span>
    <span *ngIf="col.field != 'script_name'" >
      <a [routerLink]="['/localrunreport' , row[col.field]['sessionId']]"> {{row[col.field]['status']}}</a>
    </span>
  </td>
</tr>
</ng-template>



</p-table>

In the exported CSV file, you can see the issue depicted here: exported csv

The root cause of this problem stems from the fact that the array of objects is structured as follows:

[{'script_name': value, 'device_name':{'status':value,'sessionId':value}}}

Hence, the obstacle arises because the key 'device_name' holds an object as its value. Is there a method through which I can include the object's property in the CSV file?

Answer №1

Attempt to mimic the appearance of your HTML as shown below:

<tr>
  <td *ngFor="let col of cols">
    {{row[col.field]}}
  </td>
</tr>

by relocating your HTML ngIf conditions into your TypeScript code.

After making these adjustments, you should be able to easily retrieve and display the values.

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

Can a variable Angular component be embedded within another component and have data passed to it?

What I desire If we consider component2 as the component in which I want to utilize variable components, let's take component1 as an example. component1.html: <div>Hello, I'm comp 1. Data: {{data}}</div> component2.html:<div> ...

Converting JSON data into custom object types using TypeScript

Utilizing the AlphaVantage API, I am receiving a JSON response that looks like this: { "Meta Data": { "1. Information": "Intraday (5min) open, high, low, close prices and volume", "2. Symbol": &qu ...

Arranging Pipe Methods in RxJS/Observable for Optimal Functionality

In the class Some, there is a method called run that returns an Observable and contains a pipe within itself. Another pipe is used when executing the run method. import { of } from 'rxjs'; import { map, tap, delay } from 'rxjs/operators&ap ...

Tips for preserving the status of radio buttons in a React application

I am currently utilizing a Map to keep track of the state of radio buttons, but I am facing challenges when it comes to correctly saving and updating it whenever a user makes a selection. The structure of my Map is as follows: { "Group A": [ ...

Another option to avoid using complicated else if chains

I'm facing a challenge with a function that returns a value known as user_id. It involves multiple conditions that need to be checked. First condition: Verify the service variable Second condition: If not found, retrieve user_id from local storage ...

Issue encountered when trying to pass a string into URLSearchParams

const sortString = req.query.sort as string const params = Object.fromEntries(new URLSearchParams(sortString)) Upon moving to the implementation phase, I encountered: declare var URLSearchParams: { prototype: URLSearchParams; new(init?: string[][] ...

Encountered a problem while installing an npm package for Angular 2

I seem to be encountering an error when trying to run the npm install command in the command prompt behind my corporate proxy firewall. Previously, I was able to edit the npm file with the proxy settings, but now I receive this error no matter what npm com ...

The file that is currently being downloaded has the .pptx extension, but it is being

Take a look at this code snippet: const generateDownload = ({ link, data, title, settings })=> { const newLink = document.createElement('a'); const blobUrl = link || URL.createObjectURL(new Blob([data], settings)); newLink.setAt ...

Encountering an Issue with Passing Props through Gatsby Link to Access a Prop on the

I am encountering an issue when trying to pass a value to another page for conditional rendering. The bug I'm facing is related to 'location' being undefined during the build process. Despite my efforts, I have been unable to resolve this is ...

Include a hash in the URL when the current location is entered into the view by scrolling

In my current situation, I am required to implement a @HostListener in order to navigate to an element within my web page: @HostListener('click', ['$event']) onClick(e: any) { e.preventDefault(); const href = e.target.getAttri ...

Dynamic cell editing feature in PrimeNG table

Looking to implement the PrimeNG Table. https://i.stack.imgur.com/bQycr.png Check out the live demo on StackBlitz. The table has three editable columns. The "Property Name" column always displays a text box in edit mode, while the "Property Value Type" ...

Reacting to shared routes across various layouts

My React application has two layouts: GuestLayout and AuthLayout. Each layout includes a Navbar, Outlet, and Footer, depending on whether the user is logged in: AuthLayout.tsx interface Props { isAllowed: boolean redirectPath: string children: JSX.E ...

What is the process for including headers while establishing a connection to a websocket?

After configuring a websocket topic using Spring websocket on the server side, we implemented the client side with Stomp.js to subscribe to it. Everything was functioning correctly when connecting directly to the websocket service. However, we decided to i ...

The Perplexing Problem with Angular 15's Routing Module

After upgrading to Angular 15, I encountered an issue with the redirect functionality. The error message points out a double slash "//" in my code, but upon inspection, I couldn't find any such occurrence. * * PagesRoutingModule: const routes: Routes ...

Enhance Your Website with Jquery and Bootstrap 4: Imrpessive Navbar Effects for Resizing

Hello, I am facing a challenge that my novice mind is struggling to overcome. Utilizing Bootstrap 4 navbar and some jquery, I managed to create a transition where an initially invisible navbar transforms into a solid color when the user scrolls beyond a ce ...

How can I prevent all permission requests in Electron Security?

I'm currently in the process of enhancing the security of my Angular/Electron application. For this purpose, I decided to utilize electrongravity which has proven to be effective in identifying misconfigurations and prompting me to establish a permis ...

Experimenting with PIXI.js and Jest within a React Single Page Application

I am currently working on a react application that utilizes PIXI.js and @inlet/react-pixi for animations. During testing with Jest, I encountered the following errors: Error: Uncaught [TypeError: Cannot read properties of null (reading 'stage' ...

Troubleshooting: Android compatibility issue with Angular Capacitor iframe

Issue with loading iframe on Android using Angular and Capacitor I have been attempting to use two different iframes in various forums, but unfortunately, it has not resolved my issue. While everything looks fine on Chrome, the iframe fails to load on And ...

"Experiencing sluggish performance with VSCode while using TypeScript and Styled Components

My experience with vscode's type-checking is frustratingly slow, especially when I am using styled components. I have tried searching for a solution multiple times, but have only come across similar issues on GitHub. I attempted to read and understa ...

Can you explain the significance of these specific HTML attributes within the button tag?

While browsing the web, I stumbled upon this HTML snippet: <button class="button--standard" mat-button mat-flat-button [disabled]=true >Disabled State</button> The combination of attributes like mat-button mat-flat-button [disabled]=true is u ...