如何为具有嵌套数组的对象创建接口

Question

我正在创建一个简单的GET请求，以列出Angular/TypeScript中集成帐户中的对象。以下是回复示例：

{
"value": [
{
"properties": {
"publicCertificate": "<publicCertificate>",
"createdTime": "2021-03-11T19:50:03.50193Z",
"changedTime": "2021-03-26T07:06:12.3232003Z"
},
"id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
"name": "<integrationAccountCertificateName>",
"type": "Microsoft.Logic/integrationAccounts/certificates"
},
{
"properties": {
"publicCertificate": "<publicCertificate>",
"createdTime": "2021-05-27T12:45:33.455709Z",
"changedTime": "2021-05-27T12:45:33.4564322Z"
},
"id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>",
"name": "<integrationAccountCertificateName>",
"type": "Microsoft.Logic/integrationAccounts/certificates"
}
]
}

这是我当前的界面

export interface Certificate {
value?: (ValueEntity)[] | null;
}
export interface ValueEntity {
properties: Properties;
id: string;
name: string;
type: string;
}
export interface Properties {
publicCertificate: string;
createdTime: string;
changedTime: string;
}

我只需要显示publicCertificate、id、name和type值。有没有一种更简单的方法来创建接口？

编辑

这是我目前使用的服务

@Injectable()
export class integrationAccountService
{
constructor(private httpclient: HttpClient, private api: ApiService) { }
getcertificates(): Observable<any> {
const httpOptions : Object = {
headers: new HttpHeaders({
'Authorization': 'Token'
}),
responseType: 'json'
};
return this.httpclient.get('URL', httpOptions);
}
}

组件

export class CertificateTableComponent {
dataSource: MatTableDataSource<ValueEntity>;
certificates: ValueEntity[] = [];
columns: string[] = ['name', 'id', 'type', 'publicCertificate'];
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;
constructor(private _integrationAccountService: integrationAccountService) {
}
ngOnInit() {
this._integrationAccountService.getcertificates().subscribe(response => {
this.certificates = response.data;
this.dataSource = new MatTableDataSource(this.certificates);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
})
}
}

显示数据的表格

<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{ row.id }}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
<td mat-cell *matCellDef="let row">{{ row.type }}</td>
</ng-container>
<ng-container matColumnDef="publicCertificate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Public Certificate</th>
<td mat-cell *matCellDef="let row">{{ row.publicCertificate }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns;"></tr>
</table>

Answer 1

尝试以下方法，该方法将把您的响应对象转换为适当的响应，

getResponseArrayList(response): Array<PropertiesSource> {
let resultList: PropertiesSource[] = [];
resultList = response.value.map(data => {
let res : PropertiesSource = data.properties.key.keyVault;
res.publicCertificate = data.properties.publicCertificate;
return res;
});
console.log('result ', resultList);
return resultList;
}

创建了StackBlitz供您参考。

快乐编码..：(

Answer 2

您的JSON示例数据似乎已损坏。你可以试试https://jsonformatter.curiousconcept.com纠正它。一旦它是正确的JSON，我们可以更好地帮助你。

更新：

在您的服务中，如果您不返回"Observable"，而是指定已经存在的类型，这将很有帮助。这样，当你访问代码中其他地方的结果数据时，你会有更好的自动完成：

this.http.get<响应<ExtLanguage[]>gt；(语言URL(

@Injectable()
export class integrationAccountService
{
constructor(private httpclient: HttpClient, private api: ApiService) { }
getcertificates(): Observable<Certificate> {
const httpOptions : Object = {
headers: new HttpHeaders({
'Authorization': 'Token'
}),
responseType: 'json'
};
return this.httpclient.get<Certificate>('URL', httpOptions);
}
}

在你的组件中，你必须首先对结果数据进行处理，没有"response.data"。一种方法是将你收到的数据扁平化为一个新的结构：

export interface FlatRow {
name: string;
id: string;
type: string;
publicCertificate: string;
}
export class CertificateTableComponent {
dataSource: MatTableDataSource<ValueEntity>;
//certificates: ValueEntity[] = [];
data: FlatRow[] = [];
columns: string[] = ['name', 'id', 'type', 'publicCertificate'];
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, { static:true }) paginator: MatPaginator;
constructor(private _integrationAccountService: integrationAccountService) {
}
ngOnInit() {
this._integrationAccountService.getcertificates().subscribe(response => {
//this.certificates = response.data;
this.data = [];
if (response.value) {
for (let entity of response.value) {
let row: FlatRow = {
name: entity.name,
id: entity.id,
type: entity.type,
publicCertificate: entity.properties?.publicCertificate;
};
}
}
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
})
}
}