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

Error TS2339: The 'email' property is not found in the 'FindUserProps' type

interface FindUserEmailProps { readonly email: string } interface FindUserIdProps { readonly id: string } type FindUserProps = FindUserEmailProps | FindUserIdProps export const findUserByEmail = async ({ email }: FindUserProps): Promise<IUser&g ...

typescriptexpresstypes

What is preventing this from being a function?

It appears that the authenticationProvider is missing for some reason. @autoinject() export class ProviderManager implements AuthenticationManager { constructor( private container: Container ){ } public authenticate( creds: Credentials ): Promis ...

typescriptaurelia

The data source retrieved through the "get" API method is missing from the mat-table

Recently, I've started working with angularCLI and I'm facing an issue in creating a table where the dataSource is fetched from a fake API. Let me share my component class: import { Component, OnInit } from '@angular/core'; import { Fo ...

angulartypescriptangular-materialangular11mat-table

What is the process for generating an index.d.ts file within a yarn package?

I'm facing an issue with creating the index.d.ts file for my yarn package. Here is my configuration in tsconfig.json: { "include": ["src/**/*"], "exclude": ["node_modules", "**/*.spec.ts"], " ...

reactjstypescriptreact-nativenpmyarnpkg

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

If I have a modal template structured like this: <div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"& ...

javascriptangulartypescriptng-bootstrapng-modal

Is there a method in TypeScript to retrieve property names from an interface resembling reflections in C#?

I am working with an interface in TypeScript/Angular that has various properties. I'm curious if there is a way to access the property names within the code. Here's an example of what my interface looks like: export interface InterfaceName ...

angulartypescriptreflection

The Ionic framework has a defined variable

In my code, I have initialized a variable inside the constructor like this: constructor(public http: HttpClient) { this.data = null; this.http.get(this.url).subscribe((datas: any) => { this.dbUrl = datas[0].db_url2; console.log(this ...

javascripttypescriptionic2ionic3

Choose all the checkboxes that use Knockout JS

Struggling with implementing a "select all" checkbox feature as a Junior developer on a complex project utilizing knockout.Js and Typescript. I can't seem to figure out how to select all existing checkboxes. Here is the HTML: <td> <inp ...

javascripttypescriptknockout.js

Learn how to display data from the console onto an HTML page using Angular 2

I am working on a page with 2 tabs. One tab is for displaying active messages and the other one is for closed messages. If the data active value is true, the active messages section in HTML should be populated accordingly. If the data active is false, th ...

angulartypescript

What is causing the consistent occurrences of receiving false in Angular?

findUser(id:number):boolean{ var bool :boolean =false this.companyService.query().subscribe((result)=>{ for (let i = 0; i < result.json.length; i++) { try { if( id == result.json[i].user.id) ...

javascriptangulartypescript

Preventing data binding for a specific variable in Angular 2: Tips and tricks

How can I prevent data binding for a specific variable? Here's my current approach: // In my case, data is mostly an object. // I would prefer a global solution function(data) { d = data; // This variable changes based on user input oldD = da ...

javascriptangulartypescript

Tips for eliminating contenthash (hash) from the names of JavaScript and CSS files

Google's cached pages are only updated once or twice a day, which can result in broken sites on these cached versions. To prevent this issue, it is recommended to remove the contenthash from the middle of the filename for JavaScript files and eliminat ...

typescriptnext.js

Steps for wrapping a class with a higher order component

Is it feasible to encapsulate a class component within a higher order component (HOC) that is also a class? import React, { Component } from "react"; import { View } from "react-native"; import { Toast } from "react-native-easy-toast"; const withToast = ...

javascriptreactjstypescriptreact-nativereact-hoc

Adding Profile Photos to Authenticated User Accounts in Firebase / Ionic: A Step-By-Step Guide

I have thoroughly gone through the Firebase Docs on "Managing Users" for web along with watching their instructional video on YouTube. Despite following the code they provide, I am encountering an error message that states: "Property 'afAuth' do ...

angulartypescriptfirebaseionic-frameworkfirebase-authentication

Limiting the use of TypeScript ambient declarations to designated files such as those with the extension *.spec.ts

In my Jest setupTests file, I define several global identifiers such as "global.sinon = sinon". However, when typing these in ambient declarations, they apply to all files, not just the *.spec.ts files where the setupTests file is included. In the past, ...

typescriptjestjstypescript-typingstsconfig

Taking advantage of Input decorator to access several properties in Angular 2

I am currently working on a component that is designed to receive two inputs through its selector. However, I would like to make it flexible enough to accept any number of inputs from various components. Initially, I tried using a single @Input() decorator ...

angulartypescriptangular-componentsangular-decorator

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is there a way to set the initial navigation theme based on the current route params without rendering the NavigationContainer and causing a flash of content with the default theme? Can the route be accessed from outside of the NavigationContainer without ...

typescriptreact-nativereact-native-navigation

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

Is there a way to execute a code snippet just once when focusing on a specific field?

<form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="mname">Middle name:</label> ...

javascripthtmltypescript

Using Typescript to extract/calculate types with limitations without the need to explicitly extend or broaden them

I have a function called build that constructs a User object using the provided parameters. I want to define the function in such a way that it recognizes which parameters are being passed and incorporates them into the return value. Initially, I thought ...

typescripttypescript-generics