Я хочу добавить дополнительный столбец, которого нет в моем исходном ответе. Я вызываю несколько конечных точек REST одну за другой, объединяю все результаты в один JSON и показываю в файле Угловой матовый стол. Я хочу отобразить эти столбцы - ['postId', 'id', 'name', 'email', 'body', '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.info(`${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.info(response);
this.my_array.push(...response)
if (postId == 'post-1') {
response.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
//console.info(`${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.info('entering into error block')
console.info(error)
this.dataSource = new MatTableDataSource();
this.cdr.detectChanges();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
},
() => console.info('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.info(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 для изменения массива объектов
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.info(mapped)
возможный способ: вы можете использовать цикл foreach для одного и того же массива и добавить свойство со значениями. поэтому он получит обновление в том же списке массивов