Navigating through object keys in Angular 5 by iterating through them

I have an object with protected products:

protected products: { 
 [key: string]: {
  color: string,
  brand: string,
 };
} = {};

products =  {
 scan12345: {color: "Orange", brand: "X"},
 scan13813: {color: "Pink", brand: "X"},
}

How can I loop through this project in my component template? I attempted the following:

<ion-item *ngFor="let pro of products">
   {{ pro.color }}
</ion-item>

In a previous Angular 8 project, I used the keyValue pipe. Any suggestions on what I should do here? I am utilizing "target": "es2015".

angulartypescriptobjectangular5

Answer №1

If you're searching for information on the KeyValuePipe, check out this link: KeyValuePipe

Here is an example using the same object:

items =  {
  item12345: {color: "Green", brand: "Y"},
  item67890: {color: "Blue", brand: "Z"},
}

Your HTML code should look like this:

<div *ngFor="let entry of items | keyvalue">
      Key-Value Pair: {{entry.key}}:{{entry.value}} <br>
      Color: {{entry.value.color}} <br>
      Brand: {{entry.value.brand}}
</div>

Answer №2

An alternative method is to iterate through the keys of your object:

items =  {
  item123: {type: "Shirt", size: "M"},
  item456: {type: "Pants", size: "L"},
}
this.itemKeys = Object.keys(items);

<ion-item *ngFor="let key of itemKeys">
   {{ items[key].size }}
</ion-item>

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

Encountering an issue when trying to generate a button in Angular

I am currently using JavaScript to dynamically create a button in Angular. While I have been successful in creating the button, I am encountering an error when attempting to change the classname. The error message I am receiving is: Property 'clas ...

javascriptangulartypescript

How can I limit a type parameter to only be a specific subset of another type in TypeScript?

In my app, I define a type that includes all the services available, as shown below: type Services = { service0: () => string; service1: () => string; } Now, I want to create a function that can accept a type which is a subset of the Service ...

typescript

Instructions on configuring the chart data in an Angular application sourced from a backend Node.js API connected to a MongoDB database and displayed on an HTML page

app.component.html This particular file is where I showcase my chart <div style="display: block;"> <canvas baseChart width="400" height="400" [datasets]="lineChartData" ...

node.jsangularmongodbchart.jsng2-charts

Transforming text into numbers from JSON response with *ngFor in Angular 6

I'm currently attempting to convert certain strings from a JSON response into numbers. For instance, I need to change the zipcode value from "92998-3874" to 92998-3874. While doing this, I came across a helpful resource on Stack Overflow. However, I s ...

jsonangularloopsangular6

Unlock TypeScript code suggestions for extended objects

In my app, I use a configuration file named conf.ts to consolidate config values from other files for better organization. By merging these values, it becomes more convenient to access them using Conf.MY_LONG_NAMED_VALUE rather than Conf.SubCategory.MY_LON ...

javascriptjquerytypescriptwebstorm

Bring in a function by its name from the ts-nameof package that is not declared in the d.ts export

Recently, I came across a captivating package that caught my interest and I would love to incorporate it into my TypeScript application: https://github.com/dsherret/ts-nameof However, upon attempting to import the nameof function, I realized it was not be ...

javascripttypescript

Angular 7: Retrieve the most recent subscription response from an array of observables

Scenario: I am handling multiple POST requests to update a single table with diverse data sets. The response from the request will contain the updated table data. To streamline this process, I stored the observables in an array and employed forkJoin to co ...

angularrxjs

Troubleshooting Error in Angular Karma Testing: Unable to Retrieve Value of 'path' Property from Null

I am currently running tests on Angular Karma for an angular component to determine its route. The structure of the component is as follows: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angula ...

angulartestingkarma-jasmine

What could be causing the rejection of my front-end request to the back-end service?

I am currently managing an Angular application running on port 8001 of an IIS server. This application needs to interact with two back-end .NET APIs, one on port 89 and the other on port 83, both located on the same server. There are two types of users ac ...

c#asp.netangularrequest

Creating a customized pagination feature in Angular 8 without relying on material design components

I am looking to implement pagination in my Angular 8 project without relying on any material library. The data I receive includes an array with 10 data rows, as well as the first page link, last page link, and total number of pages. Server Response: { ...

javascriptangularpagination

Creating a unique filter that combines and filters data from two separate API calls for

In my current scenario, I am making two different API calls using Axios in my application. The first call fetches a complete JSON file that populates a table, while the second call retrieves only categories. This setup is due to the complexity of the app, ...

javascriptjsonobjectvue.jsaxios

What is the process for embedding images in Angular that are stored in a directory other than assets?

I am working on an Angular Application with a particular structure outlined below: Structure Within the structure, there is a directory labeled backend (highlighted in yellow) containing other directories. An example of a valid path within this structure ...

htmlangularimagesrc

Explain the concept of a static async create method having identical parameters as the constructor

I have a lot of existing classes that require refactoring to utilize an async constructor. Here's an example: class ClassA { constructor(a: number, b: string, c: string) { //... } //... } I've included an async create method ...

typescript

Change the property value prior to running TypeScript validation

I possess the following object: const translations = { msg_hello: 'Hello', msg_bye: 'Bye' } In addition, I have a function that is structured as such: const generateTranslation = (partialKey: string): keyof typeof translations ...

typescripttype-inferencetypescript-generics

Create two separate subdirectories within the Angular project for each of the development projects

1-I recently deployed an Angular project to my hosting service and it is working fine. () 2-I decided to create a new folder on my host named '/magazine'. 3-In this new folder, I am developing another project, a magazine website. However, when ...

angularapache

Avoid saying the same thing more than once

Within my Typescript class, I have the following structure: class C { #fsm (...) startFoo(name: string) { this.#fsm.send('FOO', name) return this } startBar(name: string) { this.#fsm.send('BAR', name) return th ...

typescript

Exploring the process of writing JSON in Angular to retrieve diverse data points

I have successfully printed the following JSON data in Angular from a local file: [{ "Firstname": "Steve", "Lastname": "Jansson" }, { "Firstname": " ...

arraysjsonangular

Transport parameter via routerLink to a different component

When I click on the link provided in the list-profile HTML document, I need to send a variable. However, the current code is not working and causing crashes. If more details are required, feel free to ask. List Profile Component HTML <div class="col c ...

htmlangularparametersroutescomponents

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

We currently have an extension that consists of only two files: manifest.json and background.js Despite the browser (Chrome version 112) not reporting any errors, we are facing an issue where the user agent is not being set to 'my-custom-user-agent&a ...

javascripttypescriptgoogle-chrome-extensionchromiumchrome-extension-manifest-v3

Resolving "Module not found: Error: Can't resolve 'url'" issue in Angular 14 while invoking web3 smart contract function

How do I resolve the web3-related errors in my Angular 14 dapp? I attempted to fix the issue by running npm i crypto, npm i http, and more. Every time I try to call a function from a smart contract with code like this.manager = await report.methods.mana ...

javascriptangularnpmwebpack