Как добавить дополнительное поле в существующий REST API JSON в машинописном тексте

Я хочу добавить дополнительный столбец, которого нет в моем исходном ответе. Я вызываю несколько конечных точек 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"
    }
]

возможный способ: вы можете использовать цикл foreach для одного и того же массива и добавить свойство со значениями. поэтому он получит обновление в том же списке массивов

user7040213 22.04.2022 22:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Привет Все, что вам нужно, чтобы использовать функцию карты 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)

Другие вопросы по теме