I want to add additional column which is not exist in my original response. I'm calling multiple REST endpoints one by one, and combining all the results into single JSON and showing in the Angular Mat table. I want to display these columns - ['postId', 'id', 'name', 'email', 'body', 'environment'];
I'm getting value for all columns except environment, this is something I want to add once I get the response from REST API.
For example, when I call onGetPost('post-1'), I want to add this field "environment": "dev" in the existing response. This is the original response I get when I call this 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"
}
]
I want to modify the response like below:
[
{
"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"
}
]
Likewise, when it calls onGetPost('post-2'), this field should get appended "environment": "qa" in all the items, onGetPost('post-3') should be "environment": "uat" and onGetPost('post-4') should be "environment": "prod".
I tried below code but this is not working as expected:
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)
});
}
Please find my complete code snippet:
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);
}
}
Could you please help me to resolve this issue. Appreciated your support on this. Thanks!
Final output should look like below:
[
{
"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"
}
]
