CODEWITHSUNDEEP
javascriptjsonnode.js
Saurav Mir
Saurav Mir

Reputation: 144

How to Sending Json object through node js server to express-handlebars html?

I am using a node js backend and express-handlebars as template for front end. I am fetching json file from my mysql db and sending it to my dashboard.hbs file. The problem is the json is going to the browser and as long as it is accessed from the html its showing everything right but inside the script it going crazy. Can any one tell me what am I doing wrong I have gone through a lot of sites along with this and this. none of these work. I also used register helper in my hbs for stringyfying json but still its showing me strange converted json. here goes my codes

  exports.dashboard = function (req, res) {
//var dashboards=dashboardModel.findAll({ include: [{ all: true }]});
var dasboard = null;
dashboardModel.findAll().then(dasboards => {
  dasboard = dasboards;
  if (dasboard.length > 0)
    console.log(dasboard[9].monster);
  else
    console.log('no dashboard');

    var jsss=JSON.parse(dasboard[9].monster);
    var st=JSON.stringify(jsss);

    console.log(st);

  res.render('dashboard', {
    dasboard: dasboard,
    js:jsss

  });
})

}

and here goes my template

        <!DOCTYPE html>
    <html>

    <head>
        <title>FaceMask API</title>
    </head>

    <body>
        <h2>The list of Monsters</h2>

        {{#if dasboard}}
        <table>
            <tr>
                <th>PRODUCT ID</th>
                <th>GIF_ID</th>
                <th>GIF_TITLE</th>
                <th>PRICE</th>
                <th>Monster </th>
                <th>GIF_PACK</th>
            </tr>
            {{#each dasboard}}
            <tr onclick="gotoEditDashboard('{{this.id}}')">
                <td>{{this.product_id}}</td>
                <td>{{this.gif_id}}</td>
                <td>{{this.gif_titile}}</td>
                <td>{{this.price}}</td>
                <td>{{this.monster}}</td>
                <td>{{this.gif_pack}}</td>
            </tr>


            {{/each}}
        </table>
        {{else}}
        <p> No Data Available {{dasboard}}</p>
        {{/if}}
    <script src="javascripts/dashboard.js"></script>
    <script type="text/javascript">
    var j="{{{ js}}}";
    //var jsss=JSON.parse(j);
    console.log(j[2].toString());
    //console.log("asd: "+jsss[0].fileName);
    </script>

    </body>

    </html>

I printed the json in my server its like 

[{"fileName":"blob_1527417588127.jpg","fileLink":"localhost:3000/img/blob_1527417588127.jpg"},{"fileName":"blob_1527417588127.jpg","fileLink":"localhost:3000/img/blob_1527417588127.jpg"}]

but in the browser I get only an object of which if I try to parse it as json or try to use it directly error occurs. I already said that I tried using registerHelper for express-handlebars if it do it then I get following json

[{&quot;fileName&quot;:&quot;blob_1527417588127.jpg&quot;,&quot;fileLink&quot;:&quot;localhost:3000/img/blob_1527417588127.jpg&quot;},{&quot;fileName&quot;:&quot;blob_1527417588127.jpg&quot;,&quot;fileLink&quot;:&quot;localhost:3000/img/blob_1527417588127.jpg&quot;}]

The strange thing is in the html part I am printing the monster json as well there it shows perfectly but when I am printing from my script its going crazy. Can anyone help me out??

Upvotes: 0

Views: 1539

Answers (1)

Saurav Mir
Saurav Mir

Reputation: 144

This is just strange but I found the answer to my own question. May be it will help some one falling in the same pit as me. So in the script inside html file you write the following to decode and array of json object

{{#each js}}
      var obj = {};
      {{#each this}}
        obj.{{@key}} = '{{this}}';
      {{/each}}
      m.push(obj);
    {{/each}}

And this is what you write in the server.

    var k=[];
    var s={
    "a":"as",
    "b": "ee"
};

var s1={
    "a":"ast",
    "b": "eet"
};
k.push(s);
k.push(s1);


app.get('/', function(req, res){
    res.render('index', {js:k});
  });

Upvotes: 1

Related Questions