Javascript 如何在Angular中使用JSON.parse在新行中返回多个结果？

我有一个包含多个结果的json文件

1--样本一

jsonChanges:“{”field:“cancerType”，“oldValue:“Lentigo maligna melanoma”，“newValue:“g管原发性恶性黑色素瘤”}”

在这种情况下，我成功地返回列表中的所有值

2—采样两个多个值

jsonChanges:
{“字段”：“日期”、“旧值”：“新值”：“2019年3月26日星期二00:00:00 GMT”}，
{“字段”：“techniqueType”、“oldValue”：“newValue”：“Intral”}，{“字段”：“response”、“oldValue”：“newValue”：“Complete response”}“

在本例中，它返回空

在我的component.ts中，我正在使用

   getList(patientId?: number, pageNo?: number) {
        const auditTrailSubscription = 
        this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
        GridConfig.ITEMS_PER_PAGE)
          .subscribe(
           result => {
            try {
              this.totalItems = result.recordsCount;
              this.auditTrailList = result.lstRecords;
              this.auditTrailList.forEach(x => x.jsonChanges = 
          JSON.parse(x.jsonChanges));          
          } catch (e) {
            console.log(e);
          }
        },
        err => {
          this.handleError(err);
        }
      );

    this.addSubscription("auditTrail", auditTrailSubscription);
  }

   <tr *ngFor="let at of auditTrailList | paginate: { itemsPerPage: 
      _ITEMS_PER_PAGE, currentPage: crtPage, totalItems: totalItems }"
        [attr.data-row-id]="at.userId">
        <td>{{ at.userName }}</td>
        <td>{{ at.timestamp | date:  CUSTOM_DATE_FORMAT  }}</td>
        <td>{{ at.entityName }}</td>
        <td>{{ at.jsonChanges.field }}</td>
        <td>{{ at.jsonChanges.oldValue }}</td>
        <td>{{ at.jsonChanges.newValue }}</td>
      </tr>

在我的html中，我正在使用

   getList(patientId?: number, pageNo?: number) {
        const auditTrailSubscription = 
        this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
        GridConfig.ITEMS_PER_PAGE)
          .subscribe(
           result => {
            try {
              this.totalItems = result.recordsCount;
              this.auditTrailList = result.lstRecords;
              this.auditTrailList.forEach(x => x.jsonChanges = 
          JSON.parse(x.jsonChanges));          
          } catch (e) {
            console.log(e);
          }
        },
        err => {
          this.handleError(err);
        }
      );

    this.addSubscription("auditTrail", auditTrailSubscription);
  }

   <tr *ngFor="let at of auditTrailList | paginate: { itemsPerPage: 
      _ITEMS_PER_PAGE, currentPage: crtPage, totalItems: totalItems }"
        [attr.data-row-id]="at.userId">
        <td>{{ at.userName }}</td>
        <td>{{ at.timestamp | date:  CUSTOM_DATE_FORMAT  }}</td>
        <td>{{ at.entityName }}</td>
        <td>{{ at.jsonChanges.field }}</td>
        <td>{{ at.jsonChanges.oldValue }}</td>
        <td>{{ at.jsonChanges.newValue }}</td>
      </tr>

{{at.userName}
{{at.timestamp|date:CUSTOM_date_FORMAT}
{{at.entityName}
{{at.jsonChanges.field}
{{at.jsonChanges.oldValue}
{{at.jsonChanges.newValue}

页面看起来像这样

---

我的问题是如何获取多个值并在新行中显示它们。对于返回单个值，这是可以的。但是对于多个值，我不知道。

您可以在组件中使用以下代码：

this.str='{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Cardiac surgeon"},{"field":"cancerType","oldValue":"Lentigo maligna melanoma","newValue":"Primary malignant melanoma of g canal"}';
this.arrData=this.str.split('},');
this.arrData.forEach((val, key) => {
  if(key != this.arrData.length-1){
    this.allData.push(JSON.parse(val+'}'));
  }else{
    this.allData.push(JSON.parse(val));
  }
});
console.log(this.allData);

---

然后，您必须在html文件中使用*ngFor添加额外的数组，并从该数组中获得结果，这解决了我的解决方案

     try {
        this.results = [];
        this.totalItems = result.recordsCount;
        this.auditTrailList = result.lstRecords;
        this.auditTrailList.forEach(x => {
          const jschanges = JSON.parse(`[${x.jsonChanges}]`);
          jschanges.forEach(z => {
            this.results.push({
              userName: x.userName,
              timestamp: x.timestamp,
              entityName: x.entityName,
              field: z.field,
              oldValue: z.oldValue,
              newValue: z.newValue
            })
          })
        });

---

我尝试过，但不幸的是它仍然返回空。在我的这个代码显示（控制台）：

0:{field:“转诊医生”，oldValue:“内科肿瘤医生”，newValue:“心脏外科医生”}1:{field:“cancerType”，oldValue:“雀斑恶性黑色素瘤”，newValue:“g管原发性恶性黑色素瘤”}

。你能展示一下你的代码在哪里实现我的示例一吗？我不能因为代码太长。但我用了你的方法。实际上，this.str不是这样的静态值。我从db获得json。这个json格式是字符串。对于返回单行更改，如仅1个字段=>oldValue和newValue，它可以工作。对于多个不需要的情况，

this.str

对于您的理解是静态的。您可以将字符串放入数据库中的字符串json所在的

this.str

，并查看控制台进行测试。这是

SyntaxError

，可能是您在调用时在

json.parse

中出错。您可以只向我展示使用我的方法的部分吗？示例（2）中的代码不是有效的JSON字符串。它应该被包装在一个数组中。您可以通过手动添加括号

JSON.parse（`[${x.jsonChanges}]`）

来解决此问题；但是，如果可能的话，我建议尝试在API中解决此问题。@Gasim手动我无法访问后端。这些值是动态的。我只使用我自己的服务（由后端发送的url）。在我的例子中，有两个表，当用户更改某些值时，它会自动将新数据保存到新表中。我只是从这个表中提取数据。这个jsonChanges只是简单的字符串，而不是数组。对于单行值字段>oldvalue>newvalue JSON.parse返回值没有任何问题，但如果有多行，它会抛出语法错误。@Gasim不幸地关闭了后端任务，我需要自己解决。顺便说一下，

JSON.parse（

[${x.jsonChanges}]

）

不起作用，不返回任何内容，但不会在控制台中引发异常。