Getting Json data from nested api response & show in a table

Question

I'm getting the response from my API like-

0:
action: "Add"
date: "2021-09-22T00:00:00"
level: 1
module: "[Mode001]"
oldRecord: "{\"Code\": 7,\"Name\": \"F0002\",\"Type\": \"Feat}"
newRecord: "{\"Code\": 7,\"Name\": \"F0001\",\"Type\": \"Feature}"
remark: null

Here, all the field values are received as string. I want to show the oldRecord & newRecord fields in separate table.

Component code-

this.searchPendings = this.service.get(obj).subscribe(res => {
      this.dataSource = res.apiData;
      console.log(res.apiData); 
      // I want to extract the oldRecord & newRecord from the res.apiData to work further
      var anyt = JSON.parse(res.apiData) // throws error in console
    })

How can I convert the two specific field values from string to Json & show it in a table like-

newRecord	oldRecord
Name: F0002	Name: F0001

Does this answer your question? [Converting a string to JSON object](https://stackoverflow.com/questions/10976897/converting-a-string-to-json-object) — Elikill58, Sep 22 '21 at 10:10
@Elikill58 I have another api response as string in the api response. First of all, I cannnot **extract** the **specific two fields** from the response. Then I don't know how to convert the string values into json & show them in a table (with proper header means the object key & values in the body) — XenDex, Sep 22 '21 at 10:13
@RishabVaigankar I've added the code that is fetching the data from my API. — XenDex, Sep 22 '21 at 10:25
which error it throw ? Because your exact string isn't valid json, there is the last `\"` which is missing — Elikill58, Sep 22 '21 at 10:26
@Elikill58 `SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()` I've modified your answer & applied `var oldRecord =res.apiData["oldRecord"];` instead. It also shows the same error ! — XenDex, Sep 22 '21 at 10:40
Does [this](https://stackoverflow.com/questions/13022178/uncaught-syntaxerror-unexpected-token-u-json) answer your last issue ? — Elikill58, Sep 23 '21 at 17:58
@Elikill58 no it didn't. I found another way to fix that. Thanks for your effort :) — XenDex, Sep 26 '21 at 04:37
Ok, for this, you can self-answer your question, and mark your own as accepted — Elikill58, Sep 26 '21 at 07:40

score 0 · Answer 1 · answered Sep 22 '21 at 10:25

You have to get the required value that will be the json in string format, then convert it such as :

var apiJson = {
   action: "Add",
   date: "2021-09-22T00:00:00",
   level: 1,
   module: "[Mode001]",
   oldRecord: "{\"Code\": 7,\"Name\": \"F0002\",\"Type\": \"Feat\"}",
   newRecord: "{\"Code\": 7,\"Name\": \"F0001\",\"Type\": \"Feature\"}",
   remark: null
}; // begin with your data

var oldRecord = apiJson["oldRecord"]; // get required record
var oldRecordJson = JSON.parse(oldRecord); // convert it from string to json
console.log(oldRecordJson["Name"]); // get name and print

For your exact code it will be:

this.searchPendings = this.service.get(obj).subscribe(res => {
     this.dataSource = res.apiData;
     var oldRecord = this.dataSource["oldRecord"];
     var oldRecordJson = JSON.parse(oldRecord);
     console.log(oldRecordJson["Name"]);
})

PS: WARN if it return you a list of item instead of only one. The response from your API seems not exact/not valid json

The `var oldRecord = this.dataSource["oldRecord"];` shows "Element implicitly has an 'any' type because expression of type '"oldRecord"' can't be used to index type 'MatTableDataSource'. Property 'oldRecord' does not exist on type 'MatTableDataSource'.ts(7053)" error ! — XenDex, Sep 22 '21 at 10:35
It's because of the `dataSource` type. Here it's mainly in your hand, I don't know all of your environment. You can check [this question](https://stackoverflow.com/questions/50995170/angular-mattabledatasource-error) that can help you — Elikill58, Sep 22 '21 at 10:39

Getting Json data from nested api response & show in a table

1 Answers1