How do I loop through an Object that matches my Interface using Object.keys in Typescript with Angular 7?

Question

How do I loop through an Object that matches my Interface using Object.keys in Typescript with Angular 7?

As a newcomer to Javascript, Typescript, and Angular, I am working on creating my own stats app by fetching data/game stats from a website. To organize the data effectively, I have set up an Interface with specific Key/Value pairs that correspond to the information I want to display in my template.

The response from the API is structured as nested objects, leading me to use Object.keys() for iterating through these objects and presenting the results on my HTML template. While I can successfully display the JSON of the nested object, my issue lies in displaying only the defined key values from my Interface, rather than the entire key/value set.

In an attempt to address this, I tried converting my lifeTimeStat Interface into an object within my HTML loop. Efforts included initializing it as an object within the CombatListComponent, but encountered an error: "TypeError: Cannot read property 'keys' of undefined." The workaround of setting Object = Object simply displays the entire object structure without adhering to the specific shape outlined in my Interface.

To showcase the selected data according to my Interface definition, I need further assistance with correctly transforming my Interface into an object or finding a better approach for data presentation. I've spent countless hours researching and seeking solutions on various platforms to no avail.

javascript typescript object interface angular7

Answer 1

Answer №1

Here is a syntax that should work correctly:

Object
  .keys({ x: 1, y: 2 })
  .map(key => console.log(key));

If this doesn't work for you, consider assigning the array to a variable first and then iterate over it.

Alternatively, you can utilize a helpful function that maintains types while iterating through keys and values:

const exampleObject = {
  completed: true,
  score: 129.1,
  description: 'none',
};

entries(exampleObject)
 .map(([key, value]) => console.log(`Key: ${key}, Value: ${value}`));

function entries<K>(object: K)  {
    return (Object.keys(object) as (keyof K)[])
        .filter((key) => object[key] !== undefined && object[key] !== null)
        .map(
            key => ([
                key,
                object[key],
            ] as [keyof K, Required<K>[keyof K]]),
    );
}

type Required<T> = {
    [P in keyof T]-?: T[P];
};

In your scenario, you can use the following code:

const pairs = entries(lifeTimeStat);

...

<div *ngFor="const [key, value] of pairs">    {{ value.attributes.gameModeStats.solo| json }}  </div> <br>

Answer 2

Here is a syntax that should work correctly:

Object
  .keys({ x: 1, y: 2 })
  .map(key => console.log(key));

If this doesn't work for you, consider assigning the array to a variable first and then iterate over it.

Alternatively, you can utilize a helpful function that maintains types while iterating through keys and values:

const exampleObject = {
  completed: true,
  score: 129.1,
  description: 'none',
};

entries(exampleObject)
 .map(([key, value]) => console.log(`Key: ${key}, Value: ${value}`));

function entries<K>(object: K)  {
    return (Object.keys(object) as (keyof K)[])
        .filter((key) => object[key] !== undefined && object[key] !== null)
        .map(
            key => ([
                key,
                object[key],
            ] as [keyof K, Required<K>[keyof K]]),
    );
}

type Required<T> = {
    [P in keyof T]-?: T[P];
};

In your scenario, you can use the following code:

const pairs = entries(lifeTimeStat);

...

<div *ngFor="const [key, value] of pairs">    {{ value.attributes.gameModeStats.solo| json }}  </div> <br>

How do I loop through an Object that matches my Interface using Object.keys in Typescript with Angular 7?

Answer №1

Similar questions

Typescript interface created specifically for React Higher Order Component Props

Unable to retrieve a collection within Angular-Meteor framework

Modifying a data point using various inputs in AngularJS

Implementation of a function in Typescript that can be defined with a

Guide for skipping the presentation of data in column1, when column2 contains multiple lines of content

Dynamic Font Formatting in Rails Table Based on Conditions

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

What is the most effective way to transfer an array from one PHP file to a different JavaScript file?

Vue.js - Discover the process of accessing and updating the value of a component's input field

What is the best way to update the backdrop-filter using JavaScript?

How can Next-auth handle redirection for 401 errors?

Is there a way to retrieve the line number of an error within a dynamically inserted <script> element?

use JavaScript to automatically select checkboxes based on their value

Issue with linking CSS file to EJS file in Express.js

Inquiry Concerning AJAX Frameworks Such as DWR

Guide to updating the content of a div by selecting a button located outside the div

Creating a custom Angular library with a specialized chart.js provider that includes extra plugins?

Adjust the styling of elements when they are positioned 300 pixels from the top of the viewport

Ensure your Vue components have type-checked props at compile time when using TypeScript

Encountering a tuple type TypeScript error with a spread argument is far too frequent an occurrence