How to iterate through properties declared in an Interface in Angular 12?

Question

How to iterate through properties declared in an Interface in Angular 12?

Before Angular 12, this functioned properly:

export interface Content {
    categories: string[]
    concepts: Topic[]
    formulas: Topic[]
    guides: Topic[]
}

//this.content is of type Content
['formulas', 'concepts'].forEach(c => {
      this.content[c].forEach(topic => {
//....
      });
    })

However, it now triggers an error (For the line this.content[c]):

An 'any' type is implicitly related to 'Element' because an expression of type 'string' cannot be used to index type 'Content'. No index signature with a parameter of type 'string' was found on type 'Content'.ts(7053)

How can I inform Typescript that this.content[c] is an array containing instances of Topic?

javascript angular typescript

Answer 1

Answer №1

Implement it in this manner:

['methods', 'theories'].forEach(m => {
    this.data[m as keyof Data].forEach(item => {
        //....
    });
})

Answer 2

Implement it in this manner:

['methods', 'theories'].forEach(m => {
    this.data[m as keyof Data].forEach(item => {
        //....
    });
})

Answer 3

Answer №2

After considering various options, I made a final decision on the design:

interface DataContainer {
    types: string[]
    topicsByType: Data
}

interface Data {
    [categoryKey: string]: Topic[]
}

This adjustment ensures that every string key corresponds to an array of Topic objects.

Answer 4

After considering various options, I made a final decision on the design:

interface DataContainer {
    types: string[]
    topicsByType: Data
}

interface Data {
    [categoryKey: string]: Topic[]
}

This adjustment ensures that every string key corresponds to an array of Topic objects.

How to iterate through properties declared in an Interface in Angular 12?

Answer №1

Answer №2

Similar questions

Error: Browserify jQuery Plugin Not Working

Push the accordion tab upwards towards the top of the browser

Determine the size of an SVG while taking into consideration any strokes applied

Tips for bringing in pictures from outside directories in react

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

The missing binding.node file is causing an issue with Node-sass

Next JS now includes the option to add the async attribute when generating a list of script files

Using the .ajax() function with jQuery to retrieve data and then using .find() on that data

Canvas drawImage function not displaying image at specified dimensions

Change the size of the font with a slider in VueJS

The button I have controls two spans with distinct identifiers

Leveraging the callback function to display information from a JSON file

What sets apart `var now = new Date();` and `var now = Date();` in JavaScript

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

Is there a way to compare two regex values using vuelidate?

Executing various angular 4 applications simultaneously using a shared Node.js server for rendering purposes

Creating a bezel design in CSS or Vue: A step-by-step guide

What is preventing me from accessing the $sceProvider?

Is it possible for using str_replace('<') to protect against code injected by users?

Issues with login validation in HTML when utilizing JSON and PHP