How to iterate using ngFor loop Map containing key as string and values as map iteration
For Angular 6.1+ , you can use default pipe keyvalue
( Do review and upvote also ) :
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
WORKING DEMO
For the previous version :
One simple solution to this is convert map to array : Array.from
Component Side :
map = new Map<String, String>();
constructor(){
this.map.set("sss","sss");
this.map.set("aaa","sss");
this.map.set("sass","sss");
this.map.set("xxx","sss");
this.map.set("ss","sss");
this.map.forEach((value: string, key: string) => {
console.log(key, value);
});
}
getKeys(map){
return Array.from(map.keys());
}
Template Side :
<ul>
<li *ngFor="let recipient of getKeys(map)">
{{recipient}}
</li>
</ul>
WORKING DEMO
Angular ngFor using a Map
if you only need the values, you can iterate over those
html:
<ion-item ion-item *ngFor="let item of getValues()">
<h2>{{ item.time }}</h2>
</ion-item>
ts:
getValues(): Array<IShared_Position> {
return Array.from(this.shared_position.values());
}
if you need both values, you can convert the Map to an iterateable object containing arrays with the key at index 0 and value at index 1 using the entries
-function:
html:
<ion-item ion-item *ngFor="let item of getEntries()">
<h2>key: {{ item[0] }} - time: {{item[1].time}}</h2>
</ion-item>
ts:
getEntries(): [string, IShared_Position] {
return Array.from(this.shared_position.entries());
}
access key and value of object using *ngFor
As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue
pipe to help you iterate through objects, maps, and arrays, in the common
module of angular package.
For example -
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
To keep original order, use keyvalue:onCompare
,
and in component define callback:
// ...
import {KeyValue} from '@angular/common';
@Component(/* ... */)
export class MyComponent {
private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
return -1;
}
}
Working Forked Examplecheck it out here for more useful information -
- https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
- https://github.com/angular/angular/commit/2b49bf7
If you are using Angular v5 or below or you want to achieve using pipe follow this answer
- access key and value of object using ngfor
Iterating 2 elements in a *ngfor iteration of custom interface array in angular
You mean memberInfo[i+1]
instead of info[I+1]
.
As the error says, info
is an object of type MemberInfo
, it's not an array.
Note that you'll have to handle duplicate items with your current solution. There are many ways to handle it (code, CSS...) but this is out of scope of this question.
How to iterate object keys using *ngFor
Angular 6.0.0
https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25
introduced a KeyValuePipe
See also https://angular.io/api/common/KeyValuePipe
@Component({
selector: 'keyvalue-pipe',
template: `<span>
<p>Object</p>
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
{{item.key}}:{{item.value}}
</div>
</span>`
})
export class KeyValuePipeComponent {
object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
map = new Map([[2, 'foo'], [1, 'bar']]);
}
original
You can use a pipe
@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
<div *ngFor="let key of objs | keys">
See also How to iterate object keys using *ngFor?
Iterating through a List<Map<String, Object>> map in Thymeleaf
You have to iterate list first, and then read each map from list & then read map object with the help of key like this:
Java Code:
List<Map<String, String>> mapList = new ArrayList<>();
Map<String, Object> firstMap = new HashMap<>();
firstMap.put("id", "1");
firstMap.put("name", "test_name_1");
Map<String, Object> secondMap = new HashMap<>();
secondMap.put("id", "2");
secondMap.put("name", "test_name_2");
mapList.add(firstMap);
mapList.add(secondMap);
model.put("map_list", mapList);
Thymeleaf Code:
<tr th:each="map : ${map_list}">
<td> CNP:</td>
<td th:text ="${map.get('id')}" ></td>
<td> Nume:</td>
<td th:text ="${map.get('name')}" ></td>
</tr>
Related Topics
How to Strip/Replace Something from a Url
Connecting to Tcp Socket from Browser Using JavaScript
How to Close Bootstrap 3 Dropdown When We Click Outside on a Tablet
Javascript, Viewing [Object Htmlinputelement]
How to Combine Object Values from Separate Lines into One Line
Search Bar With Dropdown Results
In React Why Does Calling a Function from Another Function in Our Code Not Work and Display
React-Router Go Back a Page How to Configure History
Make Angular.Foreach Wait for Promise After Going to Next Object
Hide Elements If User Logged In
How to Convert from Google Sheet Date Number Value to JavaScript Date
Html2Canvas Generates Blurry Images
How to Unmute Html5 Video With a Muted Prop
Comparing Two Json Arrays and Get Not Matching Values
How to Validate This Select Option If Not Selected
How to Trigger a Jquery Function Only Once in One Page, Per Session