Pass data without Parsing to handlebars

Asked

Viewed 148 times

0

I’m passing data to the handlebars through the express so:

res.render('user/apps/todos', { todos: JSON.stringify(todos) });`

And so I get on the page:

{{ todos }}

Now, if todos for:

[{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}]

The handlebars convert me to:

[{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}]

How to prevent handlebars from doing this operation?

javascript json handlebars.js

  • Try using it this way: res.render('user/apps/all', { all: all });

  • Forehead only with res.render('user/apps/todos', {todos});, you don’t need the JSON.stringify

  • @Apolomaster Precise, otherwise I get [Object Object],[Object Object],[Object Object]

  • If you put {{ todos }} appears [object Object]... makes sense. But inside that everyone wants to show only parts right? You can give an example of the HTML you expect to get?

  • @Sergio I wanted to get what I provided in the render function, which is the all array

  • Yes, but you want to display the "raw" array or iterate the data and create HTML with it?

Show 1 more comment

1 answer

0


Well, it seems the prop "all" encompasses all the data and you want to render them at once, for this you should use an iterator, handlebars offers some auxiliary props, see:

  • First you must pass the "all" as an array:

    const todos = [{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}];

res.render('user/apps/todos', { todos });

  • Then rewrite your template as follows:

    {{#each todos}}
<div class='todo'>
    <div>{{title}}</div>
    <div>{{body}}</div>
</div>
{{/each}}

  • Prototype of how it should work:

const todos = [{title:"My first todo", body:"My first todo's body"},{title:"My first todo 3", body:"My first todo's body 3"},{title:"SAD", body:"INSANE AMOUNTS OF SADNESS 3"}];

const render = document.querySelector('#render');
const template = render.innerHTML.replace(/\n*/g, '');

const each = template.match(/{{#each \w+}}.*{{\/each}}/gi).join('');

const eachStart = each.indexOf('}}', 8) + 2;
const eachEnd = each.lastIndexOf('{{');

const content = each.substring(eachStart, eachEnd).replace(/\s{2}/g, '');

render.innerHTML = '';

todos.forEach(todo => {
  render.insertAdjacentHTML('beforeEnd', content.replace('{{title}}', todo.title).replace('{{body}}', todo.body));
});
* {
  font: 15px monospace, sans-serif
}

.title {
  color: #fff;
  background: #555;
  text-align: center;
  box-shadow: 2px 2px 5px 2.5px #000;
}

.body {
  color: #000;
  background: #ccc;
  padding: 14px 16px;
  margin: 20px 0;
  box-shadow: 2px 2px 10px 5px #000;
}
<!-- OBS: A div render foi somente para componentizar o temmplate! -->
<div id="render">
  {{#each todos}}
    <div class="container">
      <div class="title">{{title}}</div>
      <div class="body">{{body}}</div>
    </div>
  {{/each}}
</div>

  • I have been researching further and found a simpler way to use {{{ all }}} instead of {{ all }}, but what is the difference between the two situations? It’s just that one does Parsing and the other does not?

Browser other questions tagged javascript json handlebars.js

You are not signed in. Login or sign up in order to post.