Как упорядочить объекты из JSON при выводе в Angular?

Question

Есть файл json в котором хранятся объекты, которые выводится в приложений Angular.

{
    "id": 2861,
    "areaId": 1791,
    "joinedWith": null,
    "sku": "3",
    "defaultSku": "3",
    "status": "open",
    "countActive": 0
  },
  {
    "id": 2967,
    "areaId": 1791,
    "joinedWith": 2861,
    "sku": "1",
    "defaultSku": "1",
    "status": "closed",
    "countActive": 0
  }

Эти объекты должны упорядочиться если у них совпадают у второго объекта поле joinedWith с полем id у первого объекта, и если есть эта связь, то между ними должна эта связь графически показываться. Все сделал, вывел объекты, но вот не могу их сортировать по этим полям что бы правильно выводились и связь показывалась.

app.components.html

<div class="main-container">
  <h3>Zona 1</h3>
  <div class="card-container">
    <div class="card card-1" *ngFor="let items of itemList | slice:0:14">
      <div *ngIf="items.areaId == 1791 ||checkIsEqual() == true">
        <h5>{{items.joinedWith}}"=="{{items.id}}</h5>
        <h5>{{items.sku}}</h5>
        <h4>{{items.defaultSku}}</h4>
        </div>
      <div class="card-2"></div>
    </div>
  </div>
</div>

app.components.ts

import {Component} from '@angular/core';
// @ts-ignore
import item from '../files/things.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'json-file-read-angular';
  public itemList:{id:number, areaId:number, joinedWith:number, sku:string, defaultSku:string, status:string, countActive:number}[] = item;

  checkIsEqual(){
    return item.joinedWith == item.id;
  }

}

Должно выглядеть так:

А выглядит сейчас так:

БЛОГ НА HUSL

Как упорядочить объекты из JSON при выводе в Angular?

Ответы (0 шт):