Question

我有这个JSON

 "allSMSData": [
    [
      {
        "key": "SMS Date",
        "value": "17-08-2016 10:19"
      },
      {
        "key": "Sender Name"
      },
      "Sushmitha",
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-08-2016 10:19"
      },
      {
        "key": "Sender Name",
        "value": "Sushmitha"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-08-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP. nach has done"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-08-2017 07:21"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Account Details: Bill Cycle: 20th to 19th, Bill Date: 21st of every month, Bill Due Date: Bill Date + 18 days. For Plan Tariff, ISD and roaming tariff details, click www.airtel.in, Nach"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-08-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-09-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP. nach has done. Bureau sent. Loan Credited.EMi qwr f ff. bounce."
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-09-2017 07:21"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Account Details: Bill Cycle: 20th to 19th, Bill Date: 21st of every month, Bill Due Date: Bill Date + 18 days. For Plan Tariff, ISD and roaming tariff details, click www.airtel.in, Nach, Score done 0 loan"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "01-12-2017 11:42"
      },
      {
        "key": "Sender Name",
        "value": "AM-MUBBLE"
      },
      {
        "key": "Original Message",
        "value": "Thank you for choosing Mubble https://x38uh.app.goo.gl/zgxL For your transaction UQ0SCZQ8, OTP is 459734.. Pls do not share with anyone"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "11-12-2017 11:42"
      },
      {
        "key": "Sender Name",
        "value": "AM-MUBBLE"
      },
      {
        "key": "Original Message",
        "value": "Rs. 00000 Deposited to your A/c *********000285 Details: NEFT-HUMMINGWAVE.Tot Bal:35201.57CR Avl Amt:- 35201.57(04-09-2017 13:08:20)"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-01-2018 10:19"
      },
      {
        "key": "Sender Name",
        "value": "Sushmitha"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ]
  ]

在我的模板中，我正在运行两个嵌套for循环

<table id="customers" *ngIf="allSMSData">
<caption *ngIf="allSMSData">
<h4> SMS Insights</h4>
  </caption>
<div *ngFor="let item of allSMSData">
<tr *ngFor="let i of item">
  <td class="key" width="50%">
    {{i.key}}
  </td>
  <td class="value" width="25%">{{i.value}}</td>
</tr>
  </div>
</table>

它显示如下

可以看出，SMS Date，Sender Name，＆amp;原始邮件一次又一次地重复。如何将其转换为SMS Date，Sender Name＆amp;原始消息可以是表头及其在表体中的值吗？

Answer 1

假设您的数据始终返回＆gt; 1条记录，您可以执行以下操作：

<table class="table">
<thead>
    <tr>
        <th *ngFor="let val of tblHeader">{{ val }}</th>
    </tr>
</thead>
<tbody>
<tr *ngFor="let row of data">
  <td *ngFor="let col of row">
    {{ col.value }}
  </td>
</tr>
</tbody>

组件Ts文件：

const [ first ] = allSMSData;

// get keys only for table header
this.tblHeader = first.map(x => x['key']);
this.data = allSMSData;

完整演示：https://stackblitz.com/edit/angular-wvzdye

Answer 2

为什么你的对象是这样的

{
  "key": "SMS Date",
  "value": "17-08-2016 10:19"
}, {
  "key": "Sender Name"
},
"Sushmitha", {
  "key": "Original Message",
  "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
}

不是这样的吗？

{
  "SMS Date": "17-08-2016 10:19",
  "Sender Name": "Sushmitha",
  "Original Message": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
}

这会让你的代码变得如此简单！

// TS
get dataKeys() { return Object.keys(this.allSMSData[0]) || []; }

// HTML
<table id="customers" *ngIf="allSMSData">
  <caption *ngIf="allSMSData">
    <h4> SMS Insights</h4>
  </caption>
    <tr>
      <th*ngFor="let key of dataKeys">{{key}}</th>
    </tr>
    <tr *ngFor="let item of allSMSData">
      <td *ngFor="let key of dataKeys">{{item[key]}}</td>
    </tr>
</table>

Answer 3

您切换了行和列。

此外，请确保更改JSON模式以根据您的需要相应地表示数据。

短信日期，发件人姓名，＆amp;原始消息应该是列，来自JSON的数据应该在行内。

如何删除此表中的冗余？

3 个答案: