Попытка отобразить объект

Question

Я работаю над проектом, который группирует транзакции по месяцам, но столкнулся с некоторыми проблемами. По какой-то причине моя таблица просто выводит следующее: «[объект объекта]» Если кто-то может указать, что мне не хватает, я был бы признателен! : D

Это ts-файл, который группирует массив по месяцам и затем отображает их:

export class TableJsonComponent implements OnInit {
  transactions: any = [];

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    this.httpClient.get("assets/transactions.json").subscribe(data => {
      console.log(data);
      this.transactions = data;
    });
    this.getData();
  }

  getData() {
    const monthName = item =>
      moment(item.transaction_date, "YYYY-MM-DD").format("MMMM");
    this.httpClient.get("assets/transactions.json").subscribe(data => {
      console.log(data);
      this.transactions = _.chain(this.transactions)
        .groupBy(monthName)
        .mapValues(items => _.map(items, "customer.name"))
        .value();_.map(Object, 'data');
    });

    const byMonth = _.chain(this.transactions)
      .groupBy(monthName)
      .mapValues(items => _.map(items, "customer.name"))
      .value();_.map(Object, 'data');
    console.log(byMonth);
    return byMonth;
    console.log(this.transactions);
  }
}

В этой таблице показаны все данные из массива:

<table class="table" *ngFor="let month of transactions | keyvalue">
    <tr>
        <th>{{month.key}}</th>
    </tr>
    <tr>
        <td>
            <table class="table" *ngFor="let customer of month.value">
                <tr>
                    <td>{{customer}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

И это файл Json, из которого я получаю значения:

{
  "data": [
    {
      "billing_stage_net_value": 15.160000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1142,
      "transaction_date": "2019-10-22T13:56:11.971643+00:00"
    },
    {
      "billing_stage_net_value": 51.000000000000,
      "customer": {
        "name": "Crisp Sandwich Cafe"
      },
      "id": 1143,
      "transaction_date": "2019-10-22T13:57:24.375087+00:00"
    },
    {
      "billing_stage_net_value": 13.500000000000,
      "customer": {
        "name": "Crisp Sandwich Cafe"
      },
      "id": 1144,
      "transaction_date": "2019-10-22T13:57:24.375087+00:00"
    },
    {
      "billing_stage_net_value": 12.000000000000,
      "customer": {
        "name": "Crisp Sandwich Cafe"
      },
      "id": 1145,
      "transaction_date": "2019-10-22T13:57:24.375087+00:00"
    },
    {
      "billing_stage_net_value": 17.000000000000,
      "customer": {
        "name": "Crisp Sandwich Cafe"
      },
      "id": 1149,
      "transaction_date": "2019-10-22T16:52:16.108941+00:00"
    },
    {
      "billing_stage_net_value": 13.540000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1136,
      "transaction_date": "2019-10-22T11:39:46.748688+00:00"
    },
    {
      "billing_stage_net_value": 12.640000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1137,
      "transaction_date": "2019-10-22T11:39:46.748688+00:00"
    },
    {
      "billing_stage_net_value": 3.000000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1138,
      "transaction_date": "2019-10-22T11:39:46.748688+00:00"
    },
    {
      "billing_stage_net_value": 9.000000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1141,
      "transaction_date": "2019-10-22T13:56:11.971643+00:00"
    },
    {
      "billing_stage_net_value": 81.000000000000,
      "customer": {
        "name": "Daphne's Diner"
      },
      "id": 1146,
      "transaction_date": "2019-10-22T13:58:22.839725+00:00"
    },
    {
      "billing_stage_net_value": 28.220000000000,
      "customer": {
        "name": "Daphne's Diner"
      },
      "id": 1147,
      "transaction_date": "2019-10-22T13:58:22.839725+00:00"
    },
    {
      "billing_stage_net_value": 3.900000000000,
      "customer": {
        "name": "Daphne's Diner"
      },
      "id": 1148,
      "transaction_date": "2019-10-22T13:58:22.839725+00:00"
    },
    {
      "billing_stage_net_value": 20.310000000000,
      "customer": {
        "name": "Harbour Cafe"
      },
      "id": 1140,
      "transaction_date": "2019-10-22T13:56:11.971643+00:00"
    }
  ],
  "message": "",
  "metadata": {},
  "success": true
}

Answer 1

Попробуй вот так

 <table class="table" id="customers">
    <thead>
        <tr>
            <th *ngFor="let customer of transactions[0] | keyvalue ">{{customer.key}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let customer of transactions">
            <td>{{customer.billing_stage_net_value | date}}</td>
            <td>{{customer.customer.name}}</td>
            <td>{{customer.id}}</td>
            <td>{{customer.transaction_date | date}}</td>
        </tr>
    </tbody>
</table>

Answer 2

Попробуйте:

<table class="table"  *ngFor="let month of transactions | keyvalue">
    <tr >
        <th>{{month.key}}</th>
    </tr>
    <tr  >
        <td  >
            <table class="table" *ngFor="let d of month.value">
                <tr>
                  <td><strong>id:</strong> {{d.id}}</td>
                    <td><strong>billing_stage_net_value:</strong> {{d.billing_stage_net_value}}</td>
                     <td><strong>customer: </strong>{{d.customer.name}}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

https://stackblitz.com/edit/angular-ix4zeu?file=src / app / app.component. html