How to render array of arrays of objects with mustache

Question

I am trying to render an array of arrays of objects with a mustache template in javascript, and I have not found anyone else who has asked this question. I can render an array of objects just fine, but I can't figure out how to render an array of them. I could assign each nested array to its own variable I suppose, but there could be any number of them, so I really need to keep them as an array.

Here is the type of data I need to render:

[
    [
        { id: 12345, name: "Billy" },
        { id: 23456, name: "Joe" },
        { id: 34567, name: "Jenny" }
    ],
    [
        { id: 45678, name: "Amy" },
        { id: 56789, name: "Julie" },
        { id: 67890, name: "Sam" }
    ]
]

The outer array could contain any number of nested arrays, and each nested array could contain any number objects.

I don't know if it's possible with mustache. I tried using a function, and this is the first time I've ever used a function with mustache, so maybe I'm doing something wrong. I am calling it from the render function of a Backbone View. The array of arrays (shown above) is part of the view's model's attributes. So here is what I tried.

render:
    function ()
    {
        this.model.attributes.getList =
            function ()
            {
                return  function (str, func) { return 'What in the world should I return here?'; }
            }

        this.$el.html (Mustache.render ($ ('#detail-template').html (), this.model.attributes));

        return this;
    },

And here is the section of my template where I am attempting to use the function.

{{#getList}}
    {{name}}
{{/getList}}

I am pretty sure {{name}} doesn't belong in there, but I have no idea what else I would put in there.

I tried returning func (str), but all it printed was a long string that contained [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I could not use that string as a json object, it was just a string.

I'm somewhat new to both backbone and mustache, so I thought someone might have a "best practice" solution to this, or at least could tell me if it is impossible so I don't waste any more time on it. I could not find a similar question anywhere on the Internet.

couldnt you just flatten your array? with underscore´s flatten function? Btw. in there render you should not give back "model.attributes" but "model.toJSON()". — Luke
– Luke, Commented Jun 30, 2013 at 22:33
@Luke is right, if you're using Mustache then you're going to be doing pretty much all your data wrangling in JavaScript before you get anywhere near the template. — mu is too short
– mu is too short, Commented Jul 1, 2013 at 1:22

luke_b · Accepted Answer · 2019-02-07 17:22:32Z

7

This question is 2 years old but I guess better late than never. You can use {{.}} to reference the current element in an array.

context = [
    [
        { id: 12345, name: "Billy" },
        { id: 23456, name: "Joe" },
        { id: 34567, name: "Jenny" }
    ],
    [
        { id: 45678, name: "Amy" },
        { id: 56789, name: "Julie" },
        { id: 67890, name: "Sam" }
    ]
]

template = "
    {{#context}}
        {{#.}}
            <span id={{id}}>{{name}}</span>
        {{/.}}
    {{/context}}
"

edited Feb 7, 2019 at 17:22

answered Jan 4, 2016 at 8:15

luke_b

6976 silver badges15 bronze badges

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

2 Comments

Cary Over a year ago

It should actually be {{/.}}. Otherwise, this will work.

luke_b Over a year ago

Thank @Cary, fixed it.

Collectives™ on Stack Overflow

How to render array of arrays of objects with mustache

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related