How to fetch data from JSON array and show data inside table?

Question

So in database we have jsonChanges: string[] parameter. Json look like ..

"{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Clinical oncologist"}"

in my case I need to show in my angular component table oldValue and newValue. This values inside dropdown after editing user automatically saved to database as old and newValue but inside just one string[] parameter.I need somehow extract this values from this array and show them.

1 -- My 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 -- My Component

    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);
}

@nirscraft complete - json entityId: 10027 entityName: "Primary Diagnosis (pr)" id: 10 jsonChanges: "{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Clinical oncologist"}" parentEntityId: null parentEntityName: null tenantId: 1 timestamp: 1553696043507 userId: 20020 userName: "Clinician.1" — Arzu Suleymanov
– Arzu Suleymanov, Commented Mar 28, 2019 at 13:46
@Dimanoid actually I have no idea how to extract data from this json array. I need to grab old and new value from json and show them in my table — Arzu Suleymanov
– Arzu Suleymanov, Commented Mar 28, 2019 at 13:47

labu4bd · Accepted Answer · 2019-03-28 13:45:24Z

1

when you have this array you can store in a variable in your component and pass to your html file, like: this.allData={ "field":"referringPhysician", "oldValue":"Medical oncologist", "newValue":"Clinical oncologist" }

and in your html you can show like:

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

answered Mar 28, 2019 at 13:45

labu4bd

7015 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arzu Suleymanov Over a year ago

this oldValue and newValue are dynamic. In my json file field is category name oldValue and newValue is dropdown values. I need to implement code inside getlist().subscribe( result { ... } ). This jsonChanges string[] in side of backend. I need to extract dynamic values. By the way I tried your way and tried also inside my method but it throw back undefined oldValue and newValue

labu4bd Over a year ago

your result.jsonChanges value is "{"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Clinical oncologist"}" and is that dynamic or the value of newValue, oldValue are dynamic ? can you please show me your result{}?

Arzu Suleymanov Over a year ago

actually I misunderstood but I have small issue.So I use <td>{{ at.jsonChanges }}</td> in my component html and it returns like {"field":"referringPhysician","oldValue":"Medical oncologist","newValue":"Cardiac surgeon"}. I need to show oldValue and newValue from this string[]. This jsonChanges property just one line. I have no idea how to use js code inside angular component html file.

labu4bd Over a year ago

in your component you can write like : this.allData=JSON.parse(at.jsonChanges); and in your html you can use it like <td>{{allData.oldValue}}</td> <td>{{allData.newValue}}</td>

Arzu Suleymanov Over a year ago

I solved issue but I face new issue with returning multiple values. For this I wrote detail question please look at this [link]stackoverflow.com/questions/55414487/…

|

Collectives™ on Stack Overflow

How to fetch data from JSON array and show data inside table?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related