我想添加原始回復中不存在的其他列。我一一呼叫多個 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"
}
]
uj5u.com熱心網友回復：
您好所有您需要使用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)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/462670.html
標籤：javascript 节点.js 有角度的 打字稿
上一篇：在當前索引之后附加代碼