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

Question

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.

The code in sample (2) is not a valid JSON string. It should be wrapped in an array. You can fix this issue by adding the brackets manually JSON.parse(`[${x.jsonChanges}]`); however, I recommend trying to resolve this in the API if it is possible. — Gasim
– Gasim, Commented Mar 29, 2019 at 15:45
@Gasim manually I haven’t access to backend. This values are dynamic. I just use my own service (url which is sent by backend). In my case there are 2 tables when user changes some values it automatically saves new data to new table. I am just fetching data from this table. This jsonChanges just simple string not an array. For one line values field>oldvalue>newvalue JSON.parse return values without any problem, but in case of multiple lines it throws syntax error. — Arzu Suleymanov
– Arzu Suleymanov, Commented Mar 30, 2019 at 18:55
@Gasim unfortunetaly they closed task for backend and I need to figure out on my own. By the way JSON.parse([${x.jsonChanges}]) didn't work and returns nothing but does not throw exception in console. — Arzu Suleymanov
– Arzu Suleymanov, Commented Apr 1, 2019 at 6:42

labu4bd · Accepted Answer · 2019-03-29 10:25:56Z

1

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

answered Mar 29, 2019 at 10:25

labu4bd

7015 silver badges13 bronze badges

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

15 Comments

Arzu Suleymanov Over a year ago

I tried , but unfortunately it still returns empty.

labu4bd Over a year ago

In my this code show (in console):

0: {field: "referringPhysician", oldValue: "Medical oncologist", newValue: "Cardiac surgeon"} 1: {field: "cancerType", oldValue: "Lentigo maligna melanoma", newValue: "Primary malignant melanoma of g canal"}

. can you please show your code where you implement my example one?

Arzu Suleymanov Over a year ago

I can't cause of too long code. But I used your approach. Actually this.str it is not static value like this. I get json from db. And this json in format string. For return single line changes like just 1 field => oldValue & newValue it works. For multiple cases don't

labu4bd Over a year ago

yes, this.str is a static one for your understand. you can put your string into this.str whice string json is come from your DB, and see your console for testing.

labu4bd Over a year ago

this is SyntaxError , may be your make some mistake inside JSON.parse when you call. can you show me only that part where you use my approach

|

Arzu Suleymanov · Accepted Answer · 2019-04-01 09:04:47Z

1

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

answered Apr 1, 2019 at 9:04

Arzu Suleymanov

458 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

15 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related