Export an array of objects using the ExcelService module

I am working with an array named listTutors that looks like this:

listTutors = [{
  countryId: 'tt',
  gender: 'both',
  levelId: 'tg',
  sessionType: 'inPerson',
  dashboardStatus: ['notPublished', 'published', 'external'],
  subjectId: 'n',
}];

I need to export this array to either an xlsx or csv file. To do so, I utilized the following code using the excelService class:

  public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
const workbook: XLSX.WorkBook = {
  Sheets: { data: worksheet },
  SheetNames: ['data'],
};
const excelBuffer: any = XLSX.write(workbook, {
  bookType: 'xlsx',
  type: 'array',
});
this.saveAsExcelFile(excelBuffer, excelFileName);

}

  private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
fileSaver.saveAs(
  data,
  fileName + '_export_' + new Date().getMonth() + EXCEL_EXTENSION
);

}

The issue I am facing is that when exported, the dashboardStatus field is missing as it is an array field. However, I want the data to be exported in a way that includes notPublished, published, and external inside the same column of dashboardStatus.

https://i.sstatic.net/ruGFM.png

Is there a way to achieve this using the current method or any other approach?

Answer №1

When working with demos, it's important to note that array or complex objects are not automatically included when converting to a sheet. You must first convert the object before using the json_to_sheet method.

const formattedData = jsonData.map(item => ({
  ...item,
  additionalInfo: additionalInfo.join(', '),
}));
const spreadsheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(formattedData);

Demo Link

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

How can TypeScript be used to enable CSV or PDF export in a material-react-table?

Is it possible to incorporate the ability to export data to CSV or PDF in a material-react-table? While I am familiar with how to do this with a Material UI table, I have not been able to find the same functionality for the material-react-table. Thank you ...

Is scanf capable of handling massive char arrays without breaking?

I am encountering an issue with reading a string of triple digit-digit-space. Below is the relevant code snippet, which may or may not require additional libraries: #include <stdio.h> #include <stdlib.h> #define N 20 #define M 20 #define n (3 ...

Identifying when an element is in or out of view using Next.js and TypeScript

I'm currently working on an app using Next and Typescript. The app features a navigation bar at the top of the screen, and I need it to change its style once it reaches a certain point in the view. I attempted to use jQuery for this purpose, but encou ...

How to display a div in Angular when hovering with ElementRef and Query List

I am having trouble implementing a ngFor loop in my project where I want to display a div on mouse hover using the @Input notation. This is how my HTML code looks: <div class="col s12 m6" style="position: relative" *ngFor="let res of hostInfo.resident ...

Require a property to be mandatory depending on the value of another property within a generic interface

Looking for a way to have one property affect the others in a react component interface? Here's an example of what I'm trying to achieve: export interface IMyAwesomeComponentProps<T = {}> { className: string defaultPath?: ISomeOthe ...

A perplexing issue arises in Angular 8 where a component placed between the header and footer fails to display, despite no errors being

I've encountered an issue with angular routing that I need assistance with. In the app.component.html file, we have: <router-outlet></router-outlet> The configuration in the app-routing.module.ts looks like this: import { NgModule } fr ...

experiencing an excessive amount of re-renders after transferring data to a distinct component

At the moment, I have implemented this logic to display data based on the results of a graphql query, and it is working well: const contacts = () => { const { loading, error, data } = useUsersQuery({ variables: { where: { id: 1 }, ...

Specify that a function is adhering to an interface

Is there a way in Typescript to ensure that a function implements a specific interface? For example: import { BrowserEvents, eventHandler, Event } from './browser-events'; export function setup(){ const browserEvents = new BrowserEvents(); b ...

What is the best way to maintain the order of variadic types for conditionally inferred conditional types?

Here is the type definition that I am working with: type Inner<Type> = Type extends Wrapper<infer U>[] ? U[] : never; Additionally, I have a function with the following signature: function myFunc<From extends Wrapper[], To>( values: ...

Maintain Angular Dropdown Menu Open Across Page Refresh

I am currently working on an HTML/Typescript view that is connected to a SQL Database. Whenever there are changes made to the database, the entire webpage reloads. The issue we are facing is that we have dropdown menus on the page that clients want to rema ...

I'm looking to inject both default static values and dynamic values into React's useForm hook. But I'm running into a TypeScript type error

Below is the useForm code I am using: const { register, handleSubmit, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ defaultValues: { celebUid, //props fanUid, // props price, // props ...

Understanding and processing HTML strings in typescript

I am currently utilizing TypeScript. Within my code, there is an object named "Reason" where all variables are defined as strings: value, display, dataType, and label. Reason = { value: '<ul><li>list item 1</li><li&g ...

Changing data types conditionally in Angular using TypeScript

My angular component relies on the API Response for its functionality. I receive these responses from an external API. When there are no errors Data : { Status: string; Data: number; } When an error occurs, this is what I get. Data : { Status: string; ...

Searching for a value within an array of objects using JavaScript: The ultimate guide

Similar Question: Locate specific object by id within a JavaScript objects array What is the best way to determine if a value exists in a given JavaScript array? For instance: var arr = [ {id: 1, color: 'blue'}, {id: 2, colo ...

What is the reason behind the error Generic indexed type in Typescript?

Here is a scenario where I have a specific generic type: type MapToFunctions<T> = { [K in keyof T]?: (x: T[K]) => void; }; It functions correctly in this instance: type T1 = { a: string }; const fnmap1: MapToFunctions<T1> = { a: (x: st ...

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

I recently came across this helpful tutorial, but I'm having trouble grasping how it actually functions. Here's the code snippet I've incorporated into my TypeScript file: @Component({ host: { '(document:click)': 'onOuts ...

Discovering the power of chaining operators in RxJS 6 by encapsulating .map within

I am in the process of updating my Observable code from RXJS 5 to version 6. import { Injectable } from '@angular/core'; import { Observable } from 'rxjs' import { AppConfig } from '../config/app-config'; import { Xapi } from ...

Defined a data type using Typescript, however, the underlying Javascript code is operating with an incorrect data type

Recently delving into Typescript and following along with an educational video. Encountered a strange behavior that seems like a bug. For instance: const json = '{"x": 10, "y":10}'; const coordinates: { x: number; y: number } = JSON.parse(json); ...

Retrieving Values from Components in Angular 6

Encountering an issue while retrieving values from different components. The scenario involves 2 components - ReceiveBookingManageComponent as the first component and DriverTablePickerComponent as the second one. The problem arises in DriverTablePickerCo ...

"Encountering issues with running a MongoDB aggregate query involving date fields

I have been attempting to retrieve data from MongoDB using an aggregate query in Node.js for a specific date range. let date = '20230925' let year = date.slice(0, 4); let month = String(date.slice(4, 6)).padStart(2, '0'); ...