Как манипулировать данными нескольких объектов json в таблицу в angular 8

Question

У меня есть простые json данные, мне нужно заполнить их в таблице, основываясь на условии. Я могу заполнить, но рендерится только первый объект. Мои json данные похожи на

{ "3": {"test": {"id":1, "name":"cat"}},
  "4": {"test": {"id":2, "name":"dog"}}
}

Может кто-нибудь помочь мне?

Вот мой код:

home.component. html

<div>
    <table border="1" cellspacing="2">
        <tr *ngFor = "let x of data2">
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
        </tr>
    </table>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import * as Stomp from 'stompjs';
import * as SockJS from 'sockjs-client';

declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    imageSource :any;
    statusdata1: any;
    statusdata2:any;
    closeResult: string;
    registerForm: FormGroup;
    submitted = false;
    webSocketEndPoint: string = 'wss://echo.websocket.org/';
    topic: string = "/topic/greetings";
    stompClient: any;
    mySocketData:any;
    data1:any = [];
    data2:any = [];

    constructor(private modalService: NgbModal,private formBuilder: FormBuilder) {}

    ngOnInit() {
        let statusdata2 = {"3":{"test":{"id":1,"name":"cat"}},"4":{"test":{"id":2,"name":"dog"}}}

        if(statusdata2[3]) {
            this.data2.push(statusdata2[3].test);
            console.log(statusdata2);
        }
    }
}

Answer 1

В вашем шаблоне HTML вы итерируете по data2

 <tr *ngFor = "let x of data2">
 <td>{{x.id}}</td>
 <td>{{x.name}}</td>

Это означает, что x должно выглядеть примерно так (согласно вашему коду):

let statusdata2 = {"3":{"test":{"id":1,"name":"cat"}},"4":{"test":{"id":2,"name":"dog"}}};
console.log('data2', statusdata2[3]);

Это означает, что вместо x.id вам действительно нужен x.test.id. То же самое касается name. Вы хотите x.test.name вместо x.name

Попробуйте вместо этого:

 <tr *ngFor = "let x of data2">
 <td>{{x.test.id}}</td>
 <td>{{x.test.name}}</td>