javascript - How to convert [object Object] in Backbone to actual data -

i have function in backbone view(file.js) populated json response that's in below format:-

function in backbone view:-

chart_data: function(){     var all_stats = this.collection.tojson();     $("#page-container").html(this.users_by_loc({         platform_stats: all_stats,         graph_data: all_stats.items.slice(0,5)          // want use top 5 entries plot graph     })); } 

response present part of all_stats(from api call - i'm using rails on server side):-

{    "items":    [        {            "loc": "chennai",            "users": 11707        },        {            "loc": "hyderabad",            "users": 4327        },        {            "loc": "pune",            "users": 3625        },....(many more entries)     ] } 

now, i'm trying pass json response present in graph_data parameter(defined in backbone view above) variable called chartdata defined in jst.ejs template(code below) . variable(chartdata) used charts js code plot graph.

my jst.ejs file has code populate graph data , plot graph looks this:-

<script>     var chart;        chartdata = "<%= graph_data %>"         console.log("chartdata: ", chartdata);              amcharts.ready(function () {                 // serial chart                 chart = new amcharts.amserialchart();                 chart.dataprovider = chartdata;                  //additional code plot chart                    chart.write("chartdiv");             });  </script>  <div id="chartdiv" style="width: 60%; height: 400px;"></div> 

my current roadblock when do..

chartdata = "<%= graph_data %>"     console.log("chartdata: ", chartdata); 

.. in jst.ejs template chartdata variable instead of having actual data part of all_stats (shown_above) returns following in firebug console:-

chartdata: [object object],[object object],[object object],[object object],[object object] 

how correctly assign actual data present in graph_data variable(as part of backbone view) variable chartdata present in jst.ejs template plot graph ?

mixing "real" javascript code in templates (i.e. tossing <script> template, not simple bits of javascript putting template together) doesn't work out well. you'll have easier time if separate concerns: htmlish things go in template, functionality hooked in view.

i'm not familiar amchart many charting (and mapping) libraries need know few important things target element before can work. in particular, they'll want know on page , how big , won't know until <div> has been rendered page. in backbone app, won't true until has rendered view and appended el page:

var v = new view; // don't know position or size of yet. v.render(); // still don't know. $('body').append(v.el); // size , position available might have // pass control browser first. 

you're facing added difficulty of amchart apparently wanting id of in dom should draw into:

chart.write("chartdiv"); 

but document.getelementbyid('chartdiv') won't return useful until after render has been called , after has done x.append(v.el) (or equivalent).

if you're expecting view's el page right after calling render can queue code run after browser gets control (and hence has time figure out size , position of things , make document.getelementbyid('chartdiv') useful) using settimeout timeout of zero:

render: function() {     var _this = this;     var chartdata = ....      // normal rendering , template stuff.      settimeout(function() {         var chart = new amcharts.amserialchart();         chart.dataprovider = chartdata;         //...         chart.write("chartdiv");     }, 0);     return this; } 

you can use _.defer (which little more settimeout(..., 1)) if want little more explicit it.

there might amchart-specific stuff deal take care of hard parts.

btw, amcharts.ready call mentioned in comments doesn't work single-page apps because equivalent $(document).ready() , fires when page loaded (i.e. once duration of single-page app). there might other events can use instead should able use existing backbone view structure instead of relying on document-ready events.