Ember / Handlebars giving [object Object] instead of string from JSON object

2 Views

Overview

Hello, I am learning Ember.js and I am connecting to a WordPress site I control via the WordPress JSON API plugin.

Using the JSON API from the plugin I’m able to easily pull in the WordPress post title, author name, publish date, post excerpt, etc for any post without problems. However, when I try and use the post content, I get [object Object] back instead of the expected string.

Read More

Looking directly at the JSON object I’m working with, both excerpt and content are items in the JSON object which are each equal to a string of HTML. The only difference between the two appears to be the length of the string. using {{{excerpt}}} returns the string and allows the HTML to be properly formatted while {{{content}}} just prints out ‘[object Object]’.

The Handlebars Template

<script type="text/x-handlebars" id="post">
  <div class="post">
    <h1>{{title}}</h1>
    <h2>by {{author.name}} <small class="muted">({{date}})</small></h2>

    <hr>

    <div class="below-the-fold">
      {{{content}}}
    </div>
  </div>

The Rendered HTML by Ember

<div class="post">
  <h1>Sample Post</h1>
  <h2>by Boydbme <small class="muted">(2015-01-10 11:32:36)</small></h2>

  <hr>

  <div class="below-the-fold">
    [object Object]
  </div>
</div>

the JSON object I’m working with

post: {
    id: 1306,
    type: "post",
    slug: "sample-post",
    url: "#removed_for_stack_overflow",
    status: "publish",
    title: "Sample Post",
    title_plain: "Sample Post",
    content: "<p class="p1"><span class="s1">Lorem harum fuga.</span></p> <p class="p1"><span class="s1">Lorem dolor fuga.</span></p> <p class="p1"><span class="s1">Lorem ipsuuga.</span></p> <p class="p1"><span class="s1">Lorem dolor</span></p> <p class="p1"><span class="s1">Lorem harum fuga.</span></p>",
    excerpt: "<p>Lorem ipsum dolor sit fuga.<a class="read-more" href="#removed_for_stack_overflow">Read More &raquo;</a></p> ",
    date: "2015-01-10 11:32:36",
    modified: "2015-01-10 11:32:36",
    categories: [],
    tags: [],
    author: {},
    comments: [],
    attachments: [],
    comment_count: 0,
    comment_status: "closed",
    thumbnail: "#removed_for_stack_overflow",
    custom_fields: {},
    thumbnail_size: "post-thumbnail",
    thumbnail_images: {}
},

Any help would be greatly appreciated. My confusion comes from being able to use {{{excerpt}}} and get a string in my template as expected, but being unable to do the same with {{{content}}}.

Thanks!

Update:

@rené got it right in the comment below. {{{content.content}}} fixes the issue because I was colliding with an internal object.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. content is used for some internal stuff by Ember and Ember Data, particularly for Promise arrays and IIRC also in DS.Model.

    When you use a property in a Handlebars template, internally Ember does something like this.get(propName). In this particular case, your this object probably does not actually have many properties at all, and it just delegates to its own content object: this.get('excerpt') just calls this.get('content').get('excerpt') when it notices that there is no excerpt property on the current object. However, when you ask for content, it just translates to this.get('content'), which does exist, and contains an object.

    Most likely, you will need {{{content.content}}} instead, but it depends on what class instance gets passed to Handlebars in the end.

    You can use {{log varName}} in Ember Handlebars to debug this sort of problem.

  2. content is an object, in order to render a JS object into HTML it is cohered into a string using the toString() method. And in this case that is [object Object]. I’m guessing you want the string of JSON. You will need to do one of two things.

    Make a computed property that will return a string using the JSON.stringify(this.get('post'), null, 2) Or make a handlebars helper that will do this.