Как получить json данные на основе условия в angular 8

Question

У меня есть простые json данные, мне нужно заполнить их в таблице на основе условия. Я могу заполнить данные «statusdata1» на основе условия. Но когда я заполняю данные «statusdata2» на основе условия, то его показывая ошибку Я не понимаю, как его получить. Может кто-нибудь, пожалуйста, помогите мне. Вот код ниже

home.component. html

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

 <div>
 <table border="1" cellspacing="2">
 <tr *ngFor = "let x of data1">
 <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 = [];

constructor(private modalService: NgbModal,private formBuilder: FormBuilder) {}
  ngOnInit() {
    let statusdata1 = {"person":{"test":{"id":1,"name":"cat"}}}
    if(statusdata1.person){
        console.log(statusdata1.person);
        this.data1.push(statusdata1.person.test);
    }
    let statusdata2 = {"3":{"test":{"id":1,"name":"cat"}}}
    if(statusdata2.3){
        console.log(statusdata2.3);
        this.data1.push(statusdata2.3.test);

    }
  }

  }

Answer 1

Как сказал m_sultan, вы пытаетесь получить доступ к индексу 3 в statusdata2 или statusdata2 не имеет этой длины, поэтому вы достигаете внешнего объекта, вызывая сбой.

Это работает для statusdata1, потому что вы используете 'person' ключ, и это не может быть обработано как индекс. Так что процесс проверки для ключа человека на высоком уровне statusdata1 и он работает.

Но ваше statusdata2.3 вызывает то, что вы пытаетесь получить доступ к statusdata2 по индексу 3, а не то, что вы думаете: доступ к ключу элемента с именем '3 ».

Answer 2

Это потому, что вы используете число в качестве ключа, поэтому вам нужно заменять statusdata2.3 на statusdata2 [3] везде, где вы его используете

Точечная запись против скобочной записи

Точечная запись: идентификаторы свойств могут быть только alphanumeri c (и _ и $) Идентификаторы свойств не могут начинаться с цифры.