CODEWITHSUNDEEP
javascriptjsonangulartypescript
Arzu Suleymanov
Arzu Suleymanov

Reputation: 45

How to return multiple result in new line using JSON.parse in Angular?

I have json file with multiple results.

1 -- Sample one jsonChanges: "{"field":"cancerType","oldValue":"Lentigo maligna melanoma","newValue":"Primary malignant melanoma of g canal"}"

In this case I am succesfully return all values from list

2 -- Sample two multiple values jsonChanges: "{"field":"date","oldValue":"","newValue":"Tue Mar 26 00:00:00 GMT 2019"}, {"field":"techniqueType","oldValue":"","newValue":"Intralesional"},{"field":"response","oldValue":"","newValue":"Complete Response"}"

In this case it returns empty.

In my component.ts I am using

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

In my html I am using

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

The page looks like this

https://i.sstatic.net/w3DzH.jpg

My question is how to get multiple values and show them in new row.For returning single value it is ok. But for multiple values I have no idea.

Upvotes: 1

Views: 297

Answers (2)

Arzu Suleymanov
Arzu Suleymanov

Reputation: 45

Adding additional array and getting results from this array solved my solution.

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

Upvotes: 1

labu4bd
labu4bd

Reputation: 701

you can use this code in your component: 

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

then you have to user *ngFor in your html file

Upvotes: 1

Related Questions