我想添加原始回复中不存在的其他列。我一一调用多个 REST 端点，并将所有结果组合成单个 JSON 并显示在Angular Mat 表中。我想显示这些列 -['postId', 'id', 'name', 'email', 'body', 'environment'];
我正在为除environment之外的所有列获得价值，这是我从 REST API 获得响应后想要添加的内容。
例如，当我调用 时onGetPost('post-1')，我想"environment": "dev"在现有响应中添加此字段。这是我调用此 api 时得到的原始响应 -https://jsonplaceholder.typicode.com/posts/1/comments
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi"
},
{
"postId": 1,
"id": 2,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi"
}
]
我想修改如下响应：
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi",
"environment": "dev"
},
{
"postId": 1,
"id": 2,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi",
"environment": "dev"
}
]
同样，当它调用时onGetPost('post-2')，这个字段应该被附加"environment": "qa"到所有项目中，onGetPost('post-3')应该是"environment": "uat"并且onGetPost('post-4')应该是"environment": "prod"。
我尝试了下面的代码，但这没有按预期工作：
if (postId == 'post-1') {
response.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
//console.log(`${key} ${value}`);
this.item[key] = value;
this.item['environment'] = 'dev';
});
this.my_array.push(this.item)
});
}
请找到我的完整代码片段：
post.component.ts
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, Sort } from '@angular/material/sort';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { PostService } from './post-service';
import { Post } from './post';
export class PostComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
post: Post[];
dataSource;
columnsToDisplay = ['postId', 'id', 'name', 'email', 'body', 'environment'];
my_array = [];
item = {};
/**
* Constructor
*/
constructor(
private postService: PostService,
private _liveAnnouncer: LiveAnnouncer,
private cdr: ChangeDetectorRef) { }
listPost() {
this.onGetPost('post-1');
this.onGetPost('post-2');
this.onGetPost('post-3');
this.onGetPost('post-4');
}
onGetPost(postId): void {
this.postService.getPost(postId).subscribe(
(response) => {
console.log(response);
this.my_array.push(...response)
if (postId == 'post-1') {
response.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
//console.log(`${key} ${value}`);
this.item[key] = value;
this.item['environment'] = 'dev';
});
this.my_array.push(this.item)
});
}
this.dataSource = new MatTableDataSource(this.my_array.push);
this.cdr.detectChanges();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
(error: any) => {
console.log('entering into error block')
console.log(error)
this.dataSource = new MatTableDataSource();
this.cdr.detectChanges();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
() => console.log('Done getting all post')
);
}
filterData($event: any) {
this.dataSource.filter = $event.target.value;
}
announceSortChange(sortState: Sort) {
if (sortState.direction) {
this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
} else {
this._liveAnnouncer.announce('Sorting cleared');
}
}
/**
* On init
*/
ngOnInit(): void {
this.listPost();
}
}
post-service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { Post } from "./post";
@Injectable({ providedIn: 'root' })
export class PostService {
constructor(private http: HttpClient) { }
endpoint: any;
getPost(id): Observable<Post[]> {
console.log(id);
switch (id) {
case 'post-1':
this.endpoint = 'https://jsonplaceholder.typicode.com/posts/1/comments';
break;
case 'post-2':
this.endpoint = 'https://jsonplaceholder.typicode.com/posts/2/comments';
break;
case 'post-3':
this.endpoint = 'https://jsonplaceholder.typicode.com/posts/3/comments';
break;
case 'post-4':
this.endpoint = 'https://jsonplaceholder.typicode.com/posts/4/comments';
break;
}
return this.http.get<Post[]>(this.endpoint);
}
}
你能帮我解决这个问题吗？感谢您对此的支持。谢谢！
最终输出应如下所示：
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "dev"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "dev"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "dev"
},
{
"postId": 2,
"id": 6,
"name": "et fugit eligendi deleniti quidem qui sint nihil autem",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "qa"
},
{
"postId": 2,
"id": 7,
"name": "repellat consequatur praesentium vel minus molestias voluptatum",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "qa"
},
{
"postId": 2,
"id": 8,
"name": "et omnis dolorem",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "qa"
},
{
"postId": 3,
"id": 9,
"name": "provident id voluptas",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "uat"
},
{
"postId": 4,
"id": 10,
"name": "eaque et deleniti atque tenetur ut quo ut",
"email": "[email protected]",
"body": "laudantium enim quasi est",
"environment": "prod"
}
]
您好所有您需要使用javascript map函数来修改对象数组
const ob = [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi"
},
{
"postId": 1,
"id": 2,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi"
}
]
const mapped = ob.map((i)=> {
i['environment'] = "dev" // add your condition for qa/dev etc (post == 1) ? dev : qa etc
return i;
});
console.log(mapped)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句