Как добавить дополнительное поле в существующий 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": "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"
    }
]

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

user7040213 22.04.2022 22:22
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Привет Все, что вам нужно, чтобы использовать функцию карты javascript для изменения массива объектов

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)

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