在角度控制器中迭代嵌套的JSON数组,获得唯一值并在视图HTML页面中显示,可以通过以下步骤实现:
下面是一个示例代码:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
uniqueValues: any[];
constructor(private http: HttpClient) {
this.loadJSONData();
}
loadJSONData() {
this.http.get('path/to/json').subscribe((data: any[]) => {
this.uniqueValues = this.getUniqueValues(data);
});
}
getUniqueValues(data: any[]): any[] {
const uniqueValues = [];
const visited = {};
function iterateArray(arr: any[]) {
arr.forEach((item) => {
if (Array.isArray(item)) {
iterateArray(item);
} else {
const key = JSON.stringify(item);
if (!visited[key]) {
visited[key] = true;
uniqueValues.push(item);
}
}
});
}
iterateArray(data);
return uniqueValues;
}
}
在上面的示例中,loadJSONData
函数使用Angular的HttpClient模块从服务器加载JSON数据。getUniqueValues
函数使用递归方式迭代JSON数组,并将唯一值存储在uniqueValues
数组中。最后,将uniqueValues
数组赋值给this.uniqueValues
变量,以在HTML视图中显示。
在HTML视图中,你可以使用Angular的数据绑定语法来显示唯一值。例如:
<div *ngFor="let value of uniqueValues">
{{ value }}
</div>
这将在视图中显示唯一值。请注意,这只是一个示例,你需要根据实际情况进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云