javascript - 如何从 JSON 数组中获取数据并在表中显示数据?

标签 javascript json angular typescript http

所以在数据库中我们有 jsonChanges: string[] 参数。 Json 看起来像..

"{"field":"referringPhysician","oldValue":"医学肿瘤学家","newValue":"临床肿瘤学家"}"

就我而言,我需要在 Angular 组件表中显示 oldValue 和 newValue。 编辑用户后,下拉列表中的值会自动保存到数据库中作为旧值和新值,但仅在一个 string[] 参数内。我需要以某种方式从该数组中提取这些值并显示它们。

1 -- 我的 table

    <table class="listing">
            <thead>
              <th class="table-column-min">User Name</th>
              <th class="table-column-min">Modified Date</th>
              <th class="table-column-min">Entity Name</th>
              <th class="table-column-min">Old Value</th>
              <th class="table-column-min">New Value</th>
            </thead>
            <tbody>
           <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 ? (at.timestamp | date:  CUSTOM_DATE_FORMAT ) :  'Unknown' }}</td>
        <td>{{ at.entityName }}</td>
        <td>TODO: old value</td>
        <td>TODO: new value</td>
      </tr>
    </tbody>

2 -- 我的组件

    getList(patientId?: number, pageNo?: number) {
       const auditTrailSubscription = 
   this._auditTrailService.getAuditTrailUrl(patientId, pageNo, 
  GridConfig.ITEMS_PER_PAGE)
     .subscribe(
       result => {
          this.getPersonId();
          this.auditTrailList = result.lstRecords;
          this.totalItems = result.recordsCount;
       },
       err => {
        this.handleError(err);
      }
    );

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

最佳答案

当你拥有这个数组时,你可以将其存储在组件中的变量中并传递到 html 文件,例如: this.allData={ "field":"referringPhysician", "oldValue":"Medical oncologist", "newValue":"Clinical oncologist" }

在你的html中你可以显示如下:

<td>{{allData.oldValue}}</td>
<td>{{allData.newValue}}</td>

关于javascript - 如何从 JSON 数组中获取数据并在表中显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55398686/

相关文章:

javascript - 通用深层嵌套数组的 Json 到 CSV 转换的通用方法

json - Sublime Text 3 中 1 个热键下带有 args 的多个命令

Angular 2 - 在输入中只接受自然数

javascript - 带有 JavaScript 的 XHTML 中的奇怪 CDATA 行为

javascript - next() 和 siblings() 找不到按钮

javascript - 将 CSS 和 JS 定位到特定表格

javascript - 选择选项 onChange 仅更改一次

PostgreSQL 中的 JSON 模式验证?

angular - 如何正确返回 void Observable?

angular - Md-chip-list 不是已知元素