How do I output a JSON object with underscore.js?

Question

I am using the underscore.js template library with my backbone example. My template looks like this:

<script id="results-template" type="text/template">
    <h2><%= title %></h2>
</script>

The JSON object looks like this:

{"src":"placeholder.jpg","title":"an image placeholder","coordinates":[0,0],"tags":["untagged"],"location":"home"}

I am trying to parse this object through my template but the error I get through my console is:

Uncaught ReferenceError: title is not defined

What am I doing wrong? Live fiddle is here: http://jsfiddle.net/amit_e/muLjV/46/

Sander · Accepted Answer · 2012-01-04 10:06:05Z

8

your problem is this:

JSON.stringify(myPhoto)

this needs to be

myPhoto.toJSON()

reason: your JSON.stringify() will put the whole myPhoto model as a json string. now, Backbone has this function to output json as a json object, so you can use model.toJSON()

updated jsfiddle: http://jsfiddle.net/saelfaer/muLjV/50/

edited Jan 4, 2012 at 10:06

answered Jan 4, 2012 at 9:21

Sander

13.4k15 gold badges75 silver badges98 bronze badges

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

2 Comments

Amit Erandole Over a year ago

dahh!! I confused the two JSON functions. So you are saying myPhoto.toJSON() is passing the object along to the template but the stringify function won't?

Sander Over a year ago

i'm saying, that myPhoto.toJSON() returns a json object, while JSON.stringify returns a string. check this jsfiddle to see the difference. jsfiddle.net/saelfaer/muLjV/55 (keep in mind to check the console, it has no output in the results window)

Umesh Patil · Accepted Answer · 2012-01-04 10:20:18Z

1

If you want to display only title, it is not required to process whole JSON of Photo model. You can just retrieve the single property.

Below Render will suffice the need here.

render: function(event){
  var yourOutput={title:myPhoto.get('title')};
  var compiled_template = _.template( $("#results-template").html(),yourOutput);
    this.el.html(compiled_template);        
}

Your current JSON object is as below. It is not much complex, you can get any of title, src,coordinates,tags, location without effort.

{
    "src": "placeholder.jpg",
    "title": "an image placeholder",
    "coordinates": [0,0],
    "tags": ["untagged"],
    "location": "home"
}

edited Jan 4, 2012 at 10:20

answered Jan 4, 2012 at 9:29

Umesh Patil

10.7k16 gold badges56 silver badges81 bronze badges

2 Comments

Amit Erandole Over a year ago

did not know you could evaluate an expression in the middle of an json document. will that {title:myPhoto.get('title')} work?

Umesh Patil Over a year ago

Answered above! you can get any of title,src,coordinates,tags, location with code similar to above. You find JSON method efficient. You can use it :)

Collectives™ on Stack Overflow

How do I output a JSON object with underscore.js?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related