Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to use for each with mustache javascript?

i have some json objects and some of them have some other objects inside them.

if i leave only the json obj that don't have other obj inside them and then apply the template, everything goes well, i get, in this case 3 li elements.

but if i grab the original json obj the results are a bit wired. I believe i need to do a each statement to iterate through each sub json obj from inside each main one

maybe i am a bit confuse so here is some code.

i have some json data like this:

{
"msg_id":"134",
"message":"Nick",
"comment":[
    {
    "com_id":"9",
    "comment":"test",
    },
    {
    "com_id":"10",
    "comment":"testtt",
    },
    {
    "com_id":"11",
    "comment":"testtttt",
    }]
},
{
"msg_id":"134",
"message":"Nick",
},
{
"msg_id":"134",
"message":"Nick",
}

and i am trying to arive at something like this: Nick

test

testtt

testtttt

Nick Nick

i've created a template like this:

function messagesTamplate(data)
{
    $.each(data, function(index, obj)
    {
        msg += template.replace( /{{message}}/ig , obj.message );
        if(obj.comment) {
            $.each(obj.comment, function(key, val)
            {
               msg += template.replace( /{{comment}}/ig , val.comment );      
            });
        }

    });

    return msg;
}

then i just append this to the main ul.

thanks

like image 312
Patrioticcow Avatar asked Mar 21 '12 03:03

Patrioticcow


People also ask

How does Mustache JS work?

It works by expanding tags in a template using values provided in a hash or object. You can use Mustache to render templates anywhere include client side and server side environments. Mustache doesn't rely on procedural statements, there are no if statements, else clauses, or for loops.

What is Mustache script?

Mustache is a web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, Common Lisp, Crystal, D, Dart, Delphi, Elixir, Erlang, Fantom, Go, Haskell, Io, Java, JavaScript, Julia, Lua, .

How handlebars JS is different from Mustache JS?

Handlebars. js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars. js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be; Mustache: Logic-less templates.

What is Mustache programming?

Mustache is a logic-less templating system. It permits you to use pre-written text files with placeholders that will be replaced at run-time with values particular to a given request.


1 Answers

data needs to be an array (see the enclosing [])

var data = [{
  "msg_id": "134",
  "message": "Nick",
  "comment": [{
    "com_id": "9",
    "comment": "test",
  }, {
    "com_id": "10",
    "comment": "testtt",
  }, {
    "com_id": "11",
    "comment": "testtttt",
  }]
}, {
  "msg_id": "134",
  "message": "Nick",
}, {
  "msg_id": "134",
  "message": "Nick",
}]

is just this in mustache templates:

{{#data}}         //loop through all data
  {{message}}     //pick out the "message" per iteration
  {{#comment}}    //loop through all comments in an iterated item
    {{comment}}   //pick out the comment
  {{/comment}}
{{/data}}
like image 167
Joseph Avatar answered Sep 20 '22 09:09

Joseph