Creating dynamic keys to insert objects

Question

Creating dynamic keys to insert objects

In my coding project, I am dealing with an empty array, a value, and an object. Since there are multiple objects involved, I want to organize them into categories. Here is an example of what I envision:

ARRAY 
  KEY
    OBJECT
    OBJECT
  KEY
    OBJECT

Initially, the array is empty as shown below:

public serviceTable: Services[] = [];

This is the interface for the array objects:

export interface Services {
  details:
    {
      service: string,
      description: string
    }
}

The object I receive from result looks like this:

data: {
  details: [
    {
      service: this.formMain.get('service')?.value,
      description: this.formMain.get('description')?.value
    }
  ]
}

Lastly, here is how I try to define the dynamic key for the array and its objects:

dialogRef.afterClosed().subscribe(result => {
  if (result) {
   if (!Object.keys(this.serviceTable)[result.section]) {
     // No section found, lets create it ...
     this.serviceTable[this.randomNumber] = [result];
     console.log(this.serviceTable, 'ServiceTable')
   }
   else {
     this.serviceTable[this.randomNumber].push()
   }
}

While the if-statement works fine, I encounter an issue with the else-statement leading to the error:

TS2339: Property 'push' does not exist on type 'Services'.

The error possibly occurs because

this.serviceTable[this.randomNumber]

is not recognized as an array.

If the key (this.randomNumber) doesn't already exist in the array, it will be created. However, if it does exist, I intend to add the new object under the same key.

Hence, I aim to iterate through the array and access all objects associated with a specific key, like this:

for (let item of this.serviceTable[3]) { // The number can also be replaced by a string, e.g., this.serviceTable['myCategory']
  console.log(item.service); // This should display all services linked to the key '3'
}

How can I achieve this functionality?

Check out an example of my code on StackBlitz.

javascript typescript

Answer 1

Answer №1

Your primary issue lies within your user interface. While keeping the current setup, consider incorporating the following additional line:

export interface Sections extends Array<Services> {}

Furthermore, it might be necessary to update

public serviceTable: Services[] = [];

to

public serviceTable: Sections[] = [];

By utilizing an array in this manner, you can confidently employ

this.serviceTable[this.randomNumber].push(result)

without encountering any issues.

In alignment with your objective, here is a suggested approach for iterating through the array to extract objects based on a specific key:

// Similar to your existing code, but remember to include 'details'
for (let item of this.serviceTable[3]) {
 console.log(item.details.service);
}

Answer 2

Your primary issue lies within your user interface. While keeping the current setup, consider incorporating the following additional line:

export interface Sections extends Array<Services> {}

Furthermore, it might be necessary to update

public serviceTable: Services[] = [];

to

public serviceTable: Sections[] = [];

By utilizing an array in this manner, you can confidently employ

this.serviceTable[this.randomNumber].push(result)

without encountering any issues.

In alignment with your objective, here is a suggested approach for iterating through the array to extract objects based on a specific key:

// Similar to your existing code, but remember to include 'details'
for (let item of this.serviceTable[3]) {
 console.log(item.details.service);
}

Answer 3

Answer №2

Your code on Stackblitz is different from the code you have shown here, particularly in the definition of the Services interface. This difference is causing the issues you are facing (which also explains why your code was not compiling as expected)

In your question, the Services interface is defined like this:

export interface Services {
  details:
    {
      service: string,
      description: string
    }
}

However, in Stackblitz, it looks like this:

export interface Services {
  [details:number]:
    {
      service: string,
      description: string
    }
}

This results in a completely different data type. An instance of the first interface would look like this:

{ 
  details: {
    service: "foo",
    description: "bar"
  }
}

While an instance of the second interface would look like this:

{ 
  1: {
    service: "foo",
    description: "bar"
  }
}

In the second interface, the keys are numbers, making it similar to an array. This is why you were able to perform the assignment:

this.serviceTable[this.randomNumber] = [result];

However, since it's not actually an array, it does not have a push function (even though it may work at runtime because you are assigning a real array). This discrepancy causes a compilation error.

You also have a third type related to this issue, regarding the type of your result object:

data: {
  details: [
    {
      service: this.formMain.get('service')?.value,
      description: this.formMain.get('description')?.value
    }
  ]
}

If you try to assign

this.serviceTable[this.randomNumber] = [result];

, you will be trying to assign an incompatible array structure, as result contains a data property which is not present in the other types mentioned. The easiest solution might be to define the serviceTable as an array of arrays and use the original definition of the Services interface from your question rather than Stackblitz.

When creating the result object, you may need to adjust it to correctly match the updated structure, such as:

let result = {
  details: {
    service: this.formMain.get('service')?.value,
    description: this.formMain.get('description')?.value
  }
}

Or

let result = {
  data: {
    details: {
      service: this.formMain.get('service')?.value,
      description: this.formMain.get('description')?.value
    }
  }
}

Finally, if you intend to use push() with a value, that should also work with the modified definitions of serviceTable and result.

Answer 4

Your code on Stackblitz is different from the code you have shown here, particularly in the definition of the Services interface. This difference is causing the issues you are facing (which also explains why your code was not compiling as expected)

In your question, the Services interface is defined like this:

export interface Services {
  details:
    {
      service: string,
      description: string
    }
}

However, in Stackblitz, it looks like this:

export interface Services {
  [details:number]:
    {
      service: string,
      description: string
    }
}

This results in a completely different data type. An instance of the first interface would look like this:

{ 
  details: {
    service: "foo",
    description: "bar"
  }
}

While an instance of the second interface would look like this:

{ 
  1: {
    service: "foo",
    description: "bar"
  }
}

In the second interface, the keys are numbers, making it similar to an array. This is why you were able to perform the assignment:

this.serviceTable[this.randomNumber] = [result];

However, since it's not actually an array, it does not have a push function (even though it may work at runtime because you are assigning a real array). This discrepancy causes a compilation error.

You also have a third type related to this issue, regarding the type of your result object:

data: {
  details: [
    {
      service: this.formMain.get('service')?.value,
      description: this.formMain.get('description')?.value
    }
  ]
}

If you try to assign

this.serviceTable[this.randomNumber] = [result];

, you will be trying to assign an incompatible array structure, as result contains a data property which is not present in the other types mentioned. The easiest solution might be to define the serviceTable as an array of arrays and use the original definition of the Services interface from your question rather than Stackblitz.

When creating the result object, you may need to adjust it to correctly match the updated structure, such as:

let result = {
  details: {
    service: this.formMain.get('service')?.value,
    description: this.formMain.get('description')?.value
  }
}

Or

let result = {
  data: {
    details: {
      service: this.formMain.get('service')?.value,
      description: this.formMain.get('description')?.value
    }
  }
}

Finally, if you intend to use push() with a value, that should also work with the modified definitions of serviceTable and result.

Creating dynamic keys to insert objects

Answer №1

Answer №2

Similar questions

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

Troubleshooting a jQuery Selector Issue with a Dynamic Form

Using NPM imports within a Node-RED node: A step-by-step guide

Comment sections that refresh automatically after being posted

Identifying keystrokes and triggering audio in Vue.js

Using 'require' within a nested directive that relies on the parent directive in AngularJS

What is the best way to safely store a logged-in user on the client-side?

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

Using AngularJS to Apply a Class with ng-repeat

Tips for resolving the 'JSX is not defined no-undef' error post TypeScript 4.4.2 update

Missing "this" after initialization? (typescript/node/express)

What steps can I take to resolve this issue when encountering an error during npm install?

Tips on navigating an array to conceal specific items

What is the best way to show information entered into a textbox on a different webpage?

Choose each day's time slot on the jQuery FullCalendar version 2.x

Modify the size of images retrieved from the Twitch API

Angular.js: Ensure all services are loaded before initializing the application

Tips for extracting a keyword or parameters from a URL