如何在类型记录中添加现有REST中的附加字段

Question

我想添加在我最初的回复中不存在的额外列。我将一个接一个地调用多个REST端点，并将所有结果合并到单个JSON中，并显示在角表中。我想显示这些列- ['postId', 'id', 'name', 'email', 'body', 'environment'];

除了环境之外，我正在为所有列获取值，这是我从REST获得响应后想要添加的内容。

例如，，，当我调用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": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi"
  },
{
    "postId": 1,
    "id": 2,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi"
  }
]

我想修改响应，如下所示：

[
{
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi",
     "environment": "dev"
  },
{
    "postId": 1,
    "id": 2,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "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": "Eliseo@gardner.biz",
        "body": "laudantium enim quasi est",
        "environment": "dev"
    },
    {
        "postId": 1,
        "id": 2,
        "name": "quo vero reiciendis velit similique earum",
        "email": "Jayne_Kuhic@sydney.com",
        "body": "laudantium enim quasi est",
        "environment": "dev"
    },
    {
        "postId": 1,
        "id": 3,
        "name": "odio adipisci rerum aut animi",
        "email": "Nikita@garfield.biz",
        "body": "laudantium enim quasi est",
        "environment": "dev"
    },
    {
        "postId": 2,
        "id": 6,
        "name": "et fugit eligendi deleniti quidem qui sint nihil autem",
        "email": "Presley.Mueller@myrl.com",
        "body": "laudantium enim quasi est",
        "environment": "qa"
    },
    {
        "postId": 2,
        "id": 7,
        "name": "repellat consequatur praesentium vel minus molestias voluptatum",
        "email": "Dallas@ole.me",
        "body": "laudantium enim quasi est",
        "environment": "qa"
    },
    {
        "postId": 2,
        "id": 8,
        "name": "et omnis dolorem",
        "email": "Mallory_Kunze@marie.org",
        "body": "laudantium enim quasi est",
        "environment": "qa"
    },
    {
        "postId": 3,
        "id": 9,
        "name": "provident id voluptas",
        "email": "Meghan_Littel@rene.us",
        "body": "laudantium enim quasi est",
        "environment": "uat"
    },
    {
        "postId": 4,
        "id": 10,
        "name": "eaque et deleniti atque tenetur ut quo ut",
        "email": "Carmen_Keeling@caroline.name",
        "body": "laudantium enim quasi est",
        "environment": "prod"
    }
]

Answer 1

使用javascript map函数修改对象数组所需的全部内容

const ob = [
{
   "postId": 1,
   "id": 1,
   "name": "id labore ex et quam laborum",
   "email": "Eliseo@gardner.biz",
   "body": "laudantium enim quasi"
},
{
   "postId": 1,
   "id": 2,
   "name": "id labore ex et quam laborum",
   "email": "Eliseo@gardner.biz",
   "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)