Using TypeScript to structure and organize data in order to reduce the amount of overly complex code blocks

Within my TypeScript module, I have multiple array structures each intended to store distinct data sets.

var monthlySheetP = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetV = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetT = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetB = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetU = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetPV = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetPT = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetVT = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];
var monthlySheetPVT = [
    ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed']
];

As I process additional data, I populate these arrays using the following method:

if (dealer.buService == 'B') {
    monthlySheetB.push(cells);
} else if (dealer.buService == 'U') {
    monthlySheetU.push(cells);
} else if (dealer.buService == 'PVT') {
    monthlySheetPVT.push(cells);
}

The block of array declarations at the start may seem excessive. Is there a more concise way of defining these data structures?

typescript

Answer №1

Utilize an object for data storage:

var monthlySheet = {
    'P': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
    'V': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
    'T': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
    'B': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
    'U': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
    'PV': ['Year', 'Month', 'Program', 'Region', 'Market', 'Country', 'Started', 'Completed'],
//...
};

Then proceed to interact with the object:

monthlySheet[dealer.buService].push(cells);

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

Is there a way to identify when a user is returning to a previous page in Angular2

How can I detect if a user has pressed the back button in their browser to navigate back while using Angular? Currently, I am subscribing to router events to achieve this. constructor(private router: Router, private activatedRoute: ActivatedRoute) { ...

angulartypescriptangular2-routing

What is the best way to determine the appropriate generic type for this situation?

Here is an example of some code: type secondaryObjectConstraint = { [key: string]: number } abstract class Base<TObject extends object, TSecondaryObject extends secondaryObjectConstraint> {} type secondaryObjectType = { myProp: number } c ...

typescript

Cannot assign an array of Typescript type Never[] to an array of objects

Creating an object array can sometimes lead to errors, let's take a look at an example: objectExample[a].push({ id: john, detail: true }); objectExample[a].push({ id: james, detail: false}); const objectExample = { a = [ { id: john, detail: true} ...

typescript

Error: Module 'react' not found. Please make sure it is installed and correctly imported

Recently, I've been working on developing a React app using TypeScript. To kickstart the project, I used yarn create react-app (name) --use-pnp --typescript. However, I encountered an issue with the TS linter repeatedly showing the error: Cannot find ...

reactjstypescriptreact-tsx

Building upon a React component with TypeScript, we are extending its functionality using a generic type and then leveraging this same generic type

In my component, I have a setup where it takes two props - node and patchCurrentNode. import { css } from '@emotion/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { PropsWithChildren, useStat ...

reactjstypescriptgenerics

TypeScript Definitions for Material-UI version 15

Is there a Material-UI v15 TypeScript definition file in the works? I need it for a project I'm working on and as a TypeScript newbie, I want to make sure the custom file I've begun is accurate. ...

reactjstypescriptmaterial-uidefinitelytypeddefinitions

Tips for arranging TypeScript AST nodes and generating a TypeScript file as the final result

My objective is to reorganize the code in a way that sorts the link(foo) value based on the string text: import Text from '~/text.js' export default function rule(text: Text) { // Sorting rules alphabetically } Although I have made some progr ...

node.jstypescriptabstract-syntax-tree

Extending Enums in Typescript: A Comprehensive Guide

How can you work with a list of constants or Enum? Here is an example: enum MyList { A, B } enum MyList2 { C } function process<T>(input:MyList | T):void { } process<MyList2>(123) // The compiler does not recognize that 123 ...

typescript

Is using global variables as a namespace a good practice? Creating ambient TypeScript definitions in StarUML

I'm currently working on creating TypeScript type definitions for the StarUML tool. While I've been successful in defining most of the API, I've hit a roadblock when it comes to linking a JavaScript global variable ("type" in this case) with ...

typescriptnamespacestypescript-typingsstarumlambient

Typescript service wrapper class returning Axios HEAD request

I am attempting to retrieve the header response using a custom Axios HTTP service wrapper. axiosClass.ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios"; class Http { private instance: AxiosInstance | null = n ...

node.jstypescriptaxios

How to efficiently display nested object data using Angular Keyvalue pipe

I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric. While attempting to loop through ...

angulartypescriptobservableasync-pipe

Guide on utilizing TypeScript declarations imported as `* as`

Currently, I am working with react-icons and attempting to import all icon definitions using the syntax import * as Icons from 'react-icons/fi'. However, I am facing a dilemma on how to create a type that must be one of the types exported from Ic ...

reactjstypescript

Creating a spy object in Jasmine for the forEach method of router.events

I have been attempting to create a test case for a component in an application and am having trouble with the constructor. Here is how it looks: constructor(private router: Router, public dialog: MatDialog, private tlsApiServi ...

angulartypescriptjasmine

Transform the object into an array of JSON with specified keys

Here is a sample object: { labels: ["city A", "city B"], data: ["Abc", "Bcd"] }; I am looking to transform the above object into an array of JSON like this: [ { labels: "city A", data: "Abc" }, { labels: "city B", data: "Bcd" }, ]; ...

javascriptarraysjsontypescript

The air-datepicker functionality seems to be malfunctioning within an Angular 4 environment

When using static HTML, it's quite simple to integrate Air Datepicker by following the documentation available at : <html> <head> <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> <scr ...

angulartypescript

"Error encountered: Array is undefined when using the map and subscribe functions in Ionic

I have developed a service that is supposed to retrieve data from a JSON file and assign it to an array called 'countries', which will be used throughout the application on multiple pages. However, when I call the method getCountries, the countri ...

javascriptangulartypescriptionic2

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

javascriptreactjstypescriptsassnext.js

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

javascriptangulartypescriptangular7

Navigate through collections of objects containing sub-collections of more objects

The backend is sending an object that contains an array of objects, which in turn contain more arrays of objects, creating a tree structure. I need a way to navigate between these objects by following the array and then back again. What would be the most ...

javascriptangulartypescriptmultidimensional-array

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Many developers rely on the commander npm package for command-line parsing. I am considering using it as well due to its advanced functionality, such as commands, help, and option flags. For my initial program version, I only require commander to parse ar ...

javascriptnode.jstypescriptnode-commander