How to get variables from JSON string in Ionic 4 template?

Question

I have saved a JSON string in one of my database columns. Now while retrieving it I am getting a whole string printed but the specific variable.

Following is the Template

    <!-- The card -->
    <ion-card *ngFor="let comment of feed[0].meta.comments">
       <div *ngIf="comment.comment_by" class="card-title"></div>
      <div class="card-subtitle">{{comment}}</div> 
    </ion-card>
    <!-- The card End-->

Here {{comment} gives the following output

"{"comment_by_id":"4","comment_by":"Elizabeth","comment":"The Comment","comment_date":"02-05-2018 09:37:03pm"}"

but {{comment.comment_by_id}} will print nothing. How can I get the data accessed through the JSON string?

JSON Response for reference:

Also, which version of `angular` are you using ? I think you arent using `HttpClient` — Shashank Vivek, May 13 '18 at 09:11
@NanditaAroraSharma I am quite unsure about how to parse a JSON string inside template. JSON.parse() gives Cannot read property 'parse' of undefined — Jeet Tupe, May 13 '18 at 09:13
@ShashankVivek Thanks For reply. Yepp I am Surely using HttpClient — Jeet Tupe, May 13 '18 at 09:14
Can you share your `http` code ? `HttpClient` provides default json conversion :( . Can you try `.json()` like angular2 once as well. https://stackoverflow.com/questions/40136352/can-i-return-raw-json-response-in-angular2 — Shashank Vivek, May 13 '18 at 09:19
.json() function is recognizable. HttpClient surly provides default JSON conversion. My whole data is converted in JSON. but here column value was stringified json. Look at the complete response. I have updated the question. — Jeet Tupe, May 13 '18 at 09:27
as Nandita mentioned parse the stringified JSON, and then access the properties of object. — faizan, May 13 '18 at 10:26

score 1 · Accepted Answer · answered May 13 '18 at 09:37

1

Can you please try something like this in your service where you are maing the call

return this.http.get<JSONObject>(API_URL)

answered May 13 '18 at 09:37

Nandita Sharma

13,287
2
22
35

score 0 · Answer 2 · answered May 13 '18 at 11:00

There is something wrong with the type of response object.I believe you are not defining response type while using httpClient get method.

this.http.get<NoTypeDefinedHere>(this.myUrl);

therefore the returned object seems to be anonymous Object of no type.

Quick Solution

Try to access specific variable in following format

comment[comment_by_id]

Ideal Solution

Define the type of your returned json response through typescript interface. and refer it in http get method.

this.http.get<MyDefinedInterface>(this.myUrl);

DO ALSO CHECK- unintentional mishandling of response while pass object is not made.

How to get variables from JSON string in Ionic 4 template?

2 Answers2