Отображение вложенного JSON из REST API в таблице

Question

У меня проблемы с отображением вложенных JSON данных, полученных от моего внутреннего сервера в таблице.

Вот мой JSON:

{
  "id": 1,
  "personalData": {
    "firstName": "Bob",
    "lastName": "Bobby",
    "personalIdNumber": 852963
  },
  "email": "bobbybob@bob.com",
  "correspondenceAddress": {
    "addressLine1": "Sesame Street",
    "addressLine2": "1",
    "addressLine3": "2",
    "city": "Disney",
    "province": "Cartoons",
    "zipCode": "01-234"
  },
  "companyId": 265385,
  "active": true
}

Я хочу отобразить в таблице firstName , lastName , email , companyId и активные поля сверху.

Вот мой метод get из класса:

getData(): void {
    this.service.getAll()
      .subscribe((data) => {
          this.dataList = data;
        },
        error => console.log(error)
      );
  }

и таблица HTML:

<div class="table-responsive">
      <table class="table" *ngIf="dataList && dataList">
        <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>E-Mail</th>
          <th>Company ID</th>
          <th>Active?</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of dataList">
          <td>{{data.firstName}}</td>
          <td>{{data.lastName}}</td>
          <td>{{data.email}}</td>
          <td>{{data.companyId}}</td>
          <td>{{data.active ? "True" : "False"}}</td>
          <td>
            <button class="btn btn-primary" (click)="openDetails()">Details</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

PersonalData и CorrespondenceAddress никогда не будут списком. Как я могу легко прочитать и отобразить в таблице?

Answer 1

JSON Ответ

Если ваш ответ выглядит следующим образом в формате json, то вы можете создать пустой массив для хранения в другом массиве, предположив, что это JSON отображается во внешнем интерфейсе, например:

{
  "id": 1,
  "personalData": {
    "firstName": "Bob",
    "lastName": "Bobby",
    "personalIdNumber": 852963
  },
  "email": "bobbybob@bob.com",
  "correspondenceAddress": {
    "addressLine1": "Sesame Street",
    "addressLine2": "1",
    "addressLine3": "2",
    "city": "Disney",
    "province": "Cartoons",
    "zipCode": "01-234"
  },
  "companyId": 265385,
  "active": true
}

создайте этот массив для хранения бэкэнда json response

personalData:any=[]; 
correspondenceAddress:any=[];
dataList:any=[];

, затем просто создайте метод, если хотите, тогда вы можете создать другой не требующий, как ваш

getDetails(){
   this.personalData = this.array.personalData;
   this.correspondenceAddress =  this.array.correspondenceAddress;

   console.log('this.personalData => ',this.personalData);
   console.log('this.correspondenceAddress => ',this.correspondenceAddress);

   this.dataList.push({personalData: this.personalData, correspondenceAddress: 
   this.correspondenceAddress, array: this.array })

   console.log('dataList =>', this.dataList);
}

, затем просто этот метод getDetails() добавьте в ngOnInit() метод для автоматического c вызова getDetails(), когда класс инициализируется

после в вашем HTML

<div class="table-responsive">
      <table class="table" border="1">
        <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>E-Mail</th>
          <th>Company ID</th>
          <th>Active?</th>
          <th>Address</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of dataList">
          <td>{{data.personalData.firstName}}</td>
          <td>{{data.personalData.lastName}}</td>
          <td>{{data.array.email}}</td>
          <td>{{data.array.companyId}}</td>
          <td>{{data.array.companyId}}</td>
          <td>{{data.correspondenceAddress.addressLine1 + data.correspondenceAddress.addressLine2 + data.correspondenceAddress.addressLine3}}</td>
          <td>
            <button class="btn btn-primary" (click)="openDetails()">Details</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

Вот мой стек с 10 * оформлением

---

Ответ массива

Если ваш ответ выглядит в формате ниже array, то вы можете go с ним

Например:

dataList = [
    {
      id: 1,
      personalData: {
        firstName: "Bob",
        lastName: "Bobby",
        personalIdNumber: 852963
      },
      email: "bobbybob@bob.com",
      correspondenceAddress: {
        addressLine1: "Sesame Street",
        addressLine2: "1",
        addressLine3: "2",
        city: "Disney",
        province: "Cartoons",
        zipCode: "01-234"
      },
      companyId: 265385,
      active: true
    },
    {
      id: 2,
      personalData: {
        firstName: "Sam",
        lastName: "V",
        personalIdNumber: 852963
      },
      email: "samv@gmail.com",
      correspondenceAddress: {
        addressLine1: "Sesame Street",
        addressLine2: "1",
        addressLine3: "2",
        city: "Disney",
        province: "Cartoons",
        zipCode: "01-234"
      },
      companyId: 265385,
      active: true
    }
  ]

тогда в вашем HTML выглядит как

<tbody>
        <tr *ngFor="let data of dataList">
            <td>{{data?.personalData?.firstName}}</td>
            <td>{{data?.personalData?.lastName}}</td>
            <td>{{data?.email}}</td>
            <td>{{data?.companyId}}</td>
            <td>{{data?.correspondenceAddress?.addressLine1 +
             data?.correspondenceAddress?.addressLine2 +
              data?.correspondenceAddress?.addressLine3}}</td>
            <td>{{data?.active ? "True" : "False"}}</td>
            <td>
                <button class="btn btn-primary" (click)="openDetails()">Details</button>
            </td>
        </tr>
    </tbody>

Вот мой стек с 10 * Checkout

Answer 2

надеюсь, что у вас будет такой массив

dataList = [
    {
      id: 1,
      personalData: {
        firstName: "Bob",
        lastName: "Bobby",
        personalIdNumber: 852963
      },
      email: "bobbybob@bob.com",
      correspondenceAddress: {
        addressLine1: "Sesame Street",
        addressLine2: "1",
        addressLine3: "2",
        city: "Disney",
        province: "Cartoons",
        zipCode: "01-234"
      },
      companyId: 265385,
      active: true
    },
    {
      id: 2,
      personalData: {
        firstName: "Sam",
        lastName: "V",
        personalIdNumber: 852963
      },
      email: "samv@gmail.com",
      correspondenceAddress: {
        addressLine1: "Sesame Street",
        addressLine2: "1",
        addressLine3: "2",
        city: "Disney",
        province: "Cartoons",
        zipCode: "01-234"
      },
      companyId: 265385,
      active: true
    }
  ]

Для отображения данных в таблице

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>E-Mail</th>
            <th>Company ID</th>
            <th>Active?</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of dataList">
            <td>{{data?.personalData?.firstName}}</td>
            <td>{{data?.personalData?.lastName}}</td>
            <td>{{data?.email}}</td>
            <td>{{data?.companyId}}</td>
            <td>{{data?.active ? "True" : "False"}}</td>
            <td>
                <button class="btn btn-primary" (click)="openDetails()">Details</button>
            </td>
        </tr>
    </tbody>
</table>