Display JSON object in template angular 2

Question

I have this:

stanservice.categoryDetail(this.params.get('id'))
  .then((data) => {
    this.category = JSON.stringify(data.res.rows[0]);
    console.log(JSON.stringify(data.res.rows[0]));
  })
  .catch((error) => {
    console.log("Error message", error.err);
  });

The console log returns this:

{"id":6,"name":"destiny","note":"nice","type":"income"}

Then I am able to display this.category in my template as this:

{{ category }}

which returns this

{"id":6,"name":"destiny","note":"nice","type":"income"}

However, when I try to display the values of the object by doing this

{{ category.name }}

I get this error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: TypeError: Cannot read property 'name' of undefined in [
            {{ category.name }}
         in CategorydetailPage@16:18]
ORIGINAL EXCEPTION: TypeError: Cannot read property 'name' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'name' of undefined
    at AbstractChangeDetector.ChangeDetector_CategorydetailPage_0.detectChangesInRecordsInternal (viewFactory_CategorydetailPage:67:28)
    at AbstractChangeDetector.detectChangesInRecords (http://localhost:8100/build/js/app.bundle.js:13535:18)
    at AbstractChangeDetector.runDetectChanges (http://localhost:8100/build/js/app.bundle.js:13512:14)
    at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:8100/build/js/app.bundle.js:13612:18)
    at AbstractChangeDetector.runDetectChanges (http://localhost:8100/build/js/app.bundle.js:13516:14)
    at AbstractChangeDetector.detectChanges (http://localhost:8100/build/js/app.bundle.js:13501:73)
    at ChangeDetectorRef_.detectChanges (http://localhost:8100/build/js/app.bundle.js:14402:73)
    at ViewController.willEnter (http://localhost:8100/build/js/app.bundle.js:46071:22)
    at NavController._postRender (http://localhost:8100/build/js/app.bundle.js:44385:30)
    at http://localhost:8100/build/js/app.bundle.js:44333:27
ERROR CONTEXT:
[object Object]

dewd · Accepted Answer · 2016-05-14 18:51:15Z

1

Don't use the this keyword within the then function. And don't stringify your JavaScript object. Instead of:

stanservice.categoryDetail(this.params.get('id'))
   .then((data) => {
       this.category = JSON.stringify(data.res.rows[0]);
       console.log(JSON.stringify(data.res.rows[0]));
})
.catch((error) => {
   console.log("Error message", error.err);
});

Try:

var app = this;

stanservice.categoryDetail(this.params.get('id'))
   .then((data) => {
      app.category = data.res.rows[0];
      console.log(data.res.rows[0]);
})
.catch((error) => {
   console.log("Error message", error.err);
});

edited May 14, 2016 at 18:51

answered May 14, 2016 at 18:33

dewd

4,4334 gold badges35 silver badges46 bronze badges

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

10 Comments

KhoPhi Over a year ago

Same error above

Error: Uncaught (in promise): EXCEPTION: TypeError: Cannot read property 'name' of undefined in [             {{ category.name }}

dewd Over a year ago

What do you get if you console.log(data.res.rows[0]) instead of console.log(JSON.stringify(data.res.rows[0]))? Do you see an object or a string in the console? An object will let you interact with it. A string won't.

KhoPhi Over a year ago

Object {id: 3, name: "ok", note: "notes", type: "expense"}

dewd Over a year ago

@Rexford Could you try my amended answer?

KhoPhi Over a year ago

doing console.log in the then returns: CategorydetailPage {nav: Nav, params: NavParams, category: Object}

|

Collectives™ on Stack Overflow

Display JSON object in template angular 2

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related