时间戳

首页 > 解决方案 > 尝试使用 Moment JS 循环对象

json - 尝试使用 Moment JS 循环对象

问题描述

我有一个部分从数组中提取数据并显示它并按月分组。为了让它显示日期对象，我必须从 JSON 文件中删除一个图层。

感觉就像我错过了一些非常小的东西，只需要做一个微小的改变来循环数据数组。谁能指出我做错了什么？

这是显示数据的表格：

<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>

这是对数据进行分组的组件：

export class AppComponent {

  public transactions = {};
  // Sample Data
  customers = [
    {
      data: [
        {
          customer: {
            name: "John"
          },
          // transaction_date: "2017-04-18"
          transaction_date: "2019-9-22T13:56:11.971643+00:00"
        },
        {
          customer: {
            name: "Dick"
          },
          transaction_date: "2019-10-22T13:56:11.971643+00:00"
        },
        {
          customer: {
            name: "Harry"
          },
          transaction_date: "2019-7-22T13:56:11.971643+00:00"
        },
        {
          customer: {
            name: "John"
          },
          transaction_date: "2019-9-22T13:56:11.971643+00:00"
        }
      ]
    }
  ];

  constructor() {}

  ngOnInit() {
    const monthName = item =>
      moment(item.transaction_date, "YYYY-MM-DD").format("MMM");

    // Establish groupBy array
    this.transactions = _.chain(this.customers)
      .groupBy(monthName)
      .mapValues(items => _.map(items, "customer.name"))
      .value();

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

如果我以不同的方式格式化 Json，它可以工作，但我也需要它与data []数组一起工作。

// Working Array
  customers2 = [
    {
      customer: {
        name: "John"
      },
      // transaction_date: "2017-04-18"
      transaction_date: "2019-9-22T13:56:11.971643+00:00"
    },
    {
      customer: {
        name: "Dick"
      },
      transaction_date: "2019-10-22T13:56:11.971643+00:00"
    },
    {
      customer: {
        name: "Harry"
      },
      transaction_date: "2019-7-22T13:56:11.971643+00:00"
    },
    {
      customer: {
        name: "John"
      },
      transaction_date: "2019-9-22T13:56:11.971643+00:00"
    }
  ];

标签： jsonangularmomentjslodash

解决方案

尝试这个：

 this.transactions = _.chain(this.customers[0].data)

 const byMonth = _.chain(this.customers[0].data)

工作堆栈闪电战。

更新

您的customers成员变量是一个只有一个元素的数组。

这就是添加[0]访问它的原因。

您只需访问这样的数组中的第一个元素。数组名称和索引值（从零开始）。

再举几个例子：

customers = []; // <-- simple array

customers = [{}]; // <-- simple array with one object in it

如何访问它？

customers[0] // <-- first element

你的情况：

customers = [{ data: [] }]; // <-- simple array with one object in it with a property "data" which is another array.

如何访问它？

customers[0].data // <-- the solution

推荐阅读