How to parse Json data in Ionic2 framework?

Question

I have received a json response from an api through ajax post call.Here is my json response

JSON Response:

{ "s": true, "m": { "i": 10, "n": "Apple Watch", "p": "14000" }}

Actually in my typescript code, I made an alert to display JSON response. It works well. When I tried to use the response values to the HTML elements. It was unsuccessful.

TypeScript:

let headers = new Headers({ 'Content-Type': 'application/json'});

    this.value = { 'uid': 10 };

    let body = JSON.stringify(this.value);

    this.http.post(url, body, headers)
        .map(res => res.json())
            .subscribe(
              data => {
               alert(JSON.stringify(data));//Alert displays the response successfully 
               this.insdata=data;     
             },
            err => {
              console.log("Oops!");                
            }
   );

HTML

<h2>{{insdata.m.n}}</h2> //I cannot get the value here.

Error

Runtime Error Error in ./HomePage class HomePage - caused by: Cannot read property 'm' of undefined

Igor Janković · Accepted Answer · 2017-03-01 14:12:02Z

1

You have to use elvis operator because, initially insdata is empty object and you are trying to access keys which doesn't exist yet.

<h2>{{insdata?.m?.n}}</h2>

answered Mar 1, 2017 at 14:12

Igor Janković

5,5326 gold badges34 silver badges47 bronze badges

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

2 Comments

Vicky Laxman Over a year ago

Jankovic.. Thanks for your response . If i use {{insdata.s}} it works fine by printing "true" inside <h2>. But if i use {{insdata.m.n}} it didnt print the value.

Igor Janković Over a year ago

It is because insdata is an defined object initially, but 'm' is initially undefined. So, when you try to get 'n' of 'm' (which is undefined) it throws an error. That's why you need to use elvis operator (?)

sebaferreras · Accepted Answer · 2017-03-01 15:21:44Z

Since you're getting the information from the server (through this.http.post(...)), the response won't be available when Angular tries to render the view. That's why you're getting that error Cannot read property 'm' of undefined, because the property insdata is still undefined by that time.

Just like @Igor Janković says, one way to avoid that exception is to use the elvis operator ? to let Angular know that the property (or sub properties) could be null. This way, if angular finds that the property is null or undefined, it won't try to access to its sub properties:

<h2>{{insdata?.m?.n}}</h2>

That approach is ok if you just want to print a single property, but if you need to show more properties, it'd be kind of ugly if you include the ? everywhere in your view. A better approach may be using *ngIf like this:

<!-- Don't render the entire section if insdata is null -->
<div *ngIf="insdata" class="section">

    <!-- 
        Here you can print all the first level properties like
        insdata.s because insdata won't be null
    -->

    <p>{{ insdata.s }}</p>

    <div *ngIf="insdata.m" class="sub-section">

        <!-- 
            Here you can print all the properties from m
            because insdata.m won't be null
        -->

        <h2>{{insdata.m.n}}</h2>

    </div>

</div>

Again, please notice that if you just want to print the h2 element, you can use the elvis operator and that's all. I just wanted to show you that sometimes we need to show complex objects in our views (with a lot of nested sub properties), and the elvis operator seems like a poor choice in those cases.

Collectives™ on Stack Overflow

How to parse Json data in Ionic2 framework?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related