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

Invalid component exception: The element type is not valid in React Native

Experiencing problems with the Datepicker and cloning functionality in JQuery?

Executing a method to retrieve a value from an empty function in Node.js

getJSON takes precedence over other tasks

Leveraging Firebase Dynamic Links through JavaScript

Click event not triggered when transitioning to Service section in Thinkster tutorial

Accessing JSON data from a URL in AngularJS

What is the process for updating the internal TypeScript version in VS Code?

What are the steps to ensure a form does not trigger the action URL and instead only prints the data upon submission

What is the best way to retrieve the data stored in a TD element within a TR row in an HTML table?

The duration spent on a website using AJAX technology

What is the procedure for accessing a namespace when declaring it globally?

What are the best strategies for creating HTML website designs that are both scalable, adaptable, and versatile?

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

Mastering React children: A guide to correctly defining TypeScript types

Troubleshooting TypeScript in Visual Studio Code

Change the height of textarea dynamically using jQuery

What is the best way to set up TSLint to apply specific rules with one line and different rules with another line

Selenium and JavaScript integration for opening new browser tabs

Is there a workaround for the issue of the NodeJS Web Cryptography API require() being undefined in an unsecure origin (Heroku App)?