如何在角度6中使用ngFor循环JSON对象
[英]how to loop JSON object using ngFor in angular 6
问题描述
loop the object list getting from json object 
循环从json对象获取的对象列表
this is my json object i am getting 这是我得到的我的json对象
{
"0": {
"0": null,
"1": "Consolidated Statements of Changes in Stockholders\u2019 Deficit",
"2": null,
"3": "",
"4": "",
"5": "",
"6": "Balance at September 30, 2013",
"7": "",
"8": "Common stock issued for exercise of options",
"9": "Common stock issued for services",
"10": "Common stock issued to employees",
"11": "Common stock returned by employees",
"12": "Net loss for the nine months",
"13": "Shares issued as finance fee",
"14": "Amortization of deferred compensation",
"15": "Common stock issued for acquisition",
"16": "Payment on convertible note",
"17": "Exercise of common stock warrants",
"18": "Unrealized loss on securities, net",
"19": "Preferred stock",
"20": "Balance at June 30, 2014",
"21": "",
"22": "Net loss for the year",
"23": "Amortization of deferred compensation",
"24": "Shares issued for conversion of notes payable",
"25": "Write-off of derivative liability upon conversion",
"26": "Unrealized loss on securities, net",
"27": "Retirement of shares",
"28": "Conversion of Series AA convertible preferred stock",
"29": "Balance at June 30, 2015"
},
"3": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Shares",
"6": "626,667",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "400,000",
"20": "1,026,667",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "-400000",
"29": "626,667"
},
"7": {
"0": null,
"1": null,
"2": null,
"3": "Series B and Series AA",
"4": "Pref Stock",
"5": "Amount",
"6": "626",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "400",
"20": "1,026",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "-400",
"29": "626"
},
"11": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Shares",
"6": "1,028,743",
"7": "",
"8": "62,500",
"9": "42,500",
"10": "27,169",
"11": "-40000",
"12": "",
"13": "18,513",
"14": "",
"15": "57,635",
"16": "527,666",
"17": "18,214",
"18": "",
"19": "",
"20": "1,742,940",
"21": "",
"22": "",
"23": "",
"24": "6,903,286",
"25": "",
"26": "",
"27": "-5976",
"28": "903,825,954",
"29": "912,466,204"
},
"15": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Common Stock",
"5": "Amount",
"6": "1,027",
"7": "",
"8": "63",
"9": "43",
"10": "27",
"11": "-40",
"12": "",
"13": "19",
"14": "",
"15": "58",
"16": "528",
"17": "18",
"18": "",
"19": "",
"20": "1,743",
"21": "",
"22": "",
"23": "",
"24": "6,903",
"25": "",
"26": "",
"27": "-6",
"28": "903,826",
"29": "912,466"
},
"19": {
"0": null,
"1": null,
"2": null,
"3": "Accumulated Other",
"4": "Comprehensive",
"5": "Loss",
"6": "-80180",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "-817",
"19": "",
"20": "-80997",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "-1",
"27": "",
"28": "",
"29": "-80998"
},
"23": {
"0": null,
"1": null,
"2": null,
"3": "Additional",
"4": "Paid-In",
"5": "Capital",
"6": "47,642,898",
"7": "",
"8": "271,105",
"9": "218,957",
"10": "169,973",
"11": "-527960",
"12": "",
"13": "104,481",
"14": "194,531",
"15": "564,667",
"16": "321,338",
"17": "-18",
"18": "",
"19": "115,687",
"20": "49,075,659",
"21": "",
"22": "",
"23": "49,660",
"24": "282,470",
"25": "480,317",
"26": "",
"27": "6",
"28": "-903426",
"29": "48,984,686"
},
"27": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Accumulated",
"5": "Deficit",
"6": "-47921946",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "-4894278",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-52816224",
"21": "",
"22": "-1880667",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-54696891"
},
"31": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Share",
"6": "-406",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-406",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-406"
},
"35": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Treasury Stock",
"5": "Amount",
"6": "-13000",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-13000",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-13000"
},
"39": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Total",
"6": "-370575",
"7": "",
"8": "271,168",
"9": "219,000",
"10": "170,000",
"11": "-528000",
"12": "-4894278",
"13": "104,500",
"14": "194,531",
"15": "564,725",
"16": "321,866",
"17": "-",
"18": "-817",
"19": "116,087",
"20": "-3831793",
"21": "",
"22": "-1880667",
"23": "49,660",
"24": "289,373",
"25": "480,317",
"26": "-1",
"27": "-",
"28": "-",
"29": "-4893111"
}
}
2 个解决方案
解决方案1
1 已采纳 2019-06-03 11:02:55
you can do like below fiddle 你可以像下面的小提琴一样做
in template 在模板中
<div style="clear: both;" *ngFor="let key of objectKeys(data)">
<h2>{{key}}</h2>
<div style="clear: both;" *ngFor="let sKey of objectKeys(data[key])">
<b>{{sKey}}</b> : {{data[key][sKey]}}
</div>
</div>
in component 在组件中
public objectKeys = Object.keys;
public data: any = {} // your data
//Full source //完整的来源
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `
<div style="clear: both;" *ngFor="let key of objectKeys(data)">
<h2>{{key}}</h2>
<div style="clear: both;" *ngFor="let sKey of objectKeys(data[key])">
<b>{{sKey}}</b> : {{data[key][sKey]}}
</div>
</div>
`
})
export class HelloComponent {
public objectKeys = Object.keys;
public data: any = {
"0": {
"0": null,
"1": "Consolidated Statements of Changes in Stockholders\u2019 Deficit",
"2": null,
"3": "",
"4": "",
"5": "",
"6": "Balance at September 30, 2013",
"7": "",
"8": "Common stock issued for exercise of options",
"9": "Common stock issued for services",
"10": "Common stock issued to employees",
"11": "Common stock returned by employees",
"12": "Net loss for the nine months",
"13": "Shares issued as finance fee",
"14": "Amortization of deferred compensation",
"15": "Common stock issued for acquisition",
"16": "Payment on convertible note",
"17": "Exercise of common stock warrants",
"18": "Unrealized loss on securities, net",
"19": "Preferred stock",
"20": "Balance at June 30, 2014",
"21": "",
"22": "Net loss for the year",
"23": "Amortization of deferred compensation",
"24": "Shares issued for conversion of notes payable",
"25": "Write-off of derivative liability upon conversion",
"26": "Unrealized loss on securities, net",
"27": "Retirement of shares",
"28": "Conversion of Series AA convertible preferred stock",
"29": "Balance at June 30, 2015"
},
"3": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Shares",
"6": "626,667",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "400,000",
"20": "1,026,667",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "-400000",
"29": "626,667"
},
"7": {
"0": null,
"1": null,
"2": null,
"3": "Series B and Series AA",
"4": "Pref Stock",
"5": "Amount",
"6": "626",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "400",
"20": "1,026",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "-400",
"29": "626"
},
"11": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Shares",
"6": "1,028,743",
"7": "",
"8": "62,500",
"9": "42,500",
"10": "27,169",
"11": "-40000",
"12": "",
"13": "18,513",
"14": "",
"15": "57,635",
"16": "527,666",
"17": "18,214",
"18": "",
"19": "",
"20": "1,742,940",
"21": "",
"22": "",
"23": "",
"24": "6,903,286",
"25": "",
"26": "",
"27": "-5976",
"28": "903,825,954",
"29": "912,466,204"
},
"15": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Common Stock",
"5": "Amount",
"6": "1,027",
"7": "",
"8": "63",
"9": "43",
"10": "27",
"11": "-40",
"12": "",
"13": "19",
"14": "",
"15": "58",
"16": "528",
"17": "18",
"18": "",
"19": "",
"20": "1,743",
"21": "",
"22": "",
"23": "",
"24": "6,903",
"25": "",
"26": "",
"27": "-6",
"28": "903,826",
"29": "912,466"
},
"19": {
"0": null,
"1": null,
"2": null,
"3": "Accumulated Other",
"4": "Comprehensive",
"5": "Loss",
"6": "-80180",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "-817",
"19": "",
"20": "-80997",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "-1",
"27": "",
"28": "",
"29": "-80998"
},
"23": {
"0": null,
"1": null,
"2": null,
"3": "Additional",
"4": "Paid-In",
"5": "Capital",
"6": "47,642,898",
"7": "",
"8": "271,105",
"9": "218,957",
"10": "169,973",
"11": "-527960",
"12": "",
"13": "104,481",
"14": "194,531",
"15": "564,667",
"16": "321,338",
"17": "-18",
"18": "",
"19": "115,687",
"20": "49,075,659",
"21": "",
"22": "",
"23": "49,660",
"24": "282,470",
"25": "480,317",
"26": "",
"27": "6",
"28": "-903426",
"29": "48,984,686"
},
"27": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Accumulated",
"5": "Deficit",
"6": "-47921946",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "-4894278",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-52816224",
"21": "",
"22": "-1880667",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-54696891"
},
"31": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Share",
"6": "-406",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-406",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-406"
},
"35": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "Treasury Stock",
"5": "Amount",
"6": "-13000",
"7": "",
"8": "",
"9": "",
"10": "",
"11": "",
"12": "",
"13": "",
"14": "",
"15": "",
"16": "",
"17": "",
"18": "",
"19": "",
"20": "-13000",
"21": "",
"22": "",
"23": "",
"24": "",
"25": "",
"26": "",
"27": "",
"28": "",
"29": "-13000"
},
"39": {
"0": null,
"1": null,
"2": null,
"3": "",
"4": "",
"5": "Total",
"6": "-370575",
"7": "",
"8": "271,168",
"9": "219,000",
"10": "170,000",
"11": "-528000",
"12": "-4894278",
"13": "104,500",
"14": "194,531",
"15": "564,725",
"16": "321,866",
"17": "-",
"18": "-817",
"19": "116,087",
"20": "-3831793",
"21": "",
"22": "-1880667",
"23": "49,660",
"24": "289,373",
"25": "480,317",
"26": "-1",
"27": "-",
"28": "-",
"29": "-4893111"
}
};
}
解决方案2
0 2019-06-03 10:49:45
You have object inside object so need to run for loop twice as below. 您在对象内部有对象，因此需要如下两次运行循环。
<div *ngFor="let items of testObject | keyvalue">
Key: <b>{{items.key}}</b>
<div *ngFor="let item of items | key">
value:<b>{{item.value}}</b>
</div>
<hr>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在角度6中使用ngFor循环嵌套的json对象？ - How to loop a nested json object using ngFor in angular 6?
如何使用ngFor在Angular中循环未知数量的嵌套json object？ - How to loop through unknow number of nested json object in Angular with ngFor?
如何在 Angular 中使用 ngFor 遍历对象属性 - How to loop over object properties with ngFor in Angular
如何使用 *ngFor 遍历 [object Object] - How to loop over [object Object] using *ngFor
Angular 2.使用ngFor在对象内循环数组 - Angular 2. Loop of array inside object using ngFor
如何使用ngx-smart-modal angular 6通过ngFor循环显示对象数据？ - How to display object data via ngFor loop using ngx-smart-modal angular 6?
如何在 Angular 应用程序中使用 ngFor 循环 object 属性 - How to loop over object properties with ngFor in Angular app
将* ngFor与JSON Angular2结合使用 - Using *ngFor with JSON Angular2
如何在 angular 7 中使用 ngFor 循环动态嵌套数组 - how to loop the dynamically nested array using ngFor in angular 7
如何从子模块获取所有模块，在 angular 中使用 *ngFor 循环 - How to get all module from subModule, using *ngFor loop in angular
相关标签