Mustache templeting Probrem with Nested Object

Question

I have problem with mustache to render data after ajax success. and i have return json file like this

{
    "Malaysia-office": {
        "office_name": "Malaysia-office",
        "employee": [
         {
            "capacity": 3600,
            "type": "Office",
            "name": "Office Center"
         },
         {
             "capacity": 3600,
             "type": "WorkSpace",
             "name": "Workspace KL"
          }
        ]
    }
}

and example js file like this

$.get(url, function (data, textStatus, xhr) {
      $('#office-wrapper').html('');
      $('#office-wrapper').append(Mustache.render($('#section_office').html(), {
       dataOffice: data
      }));
      $("#myModal").modal('show');
});

But if i call in blade file, dataOffice not works perfectly, this is my blade file

<template id="section_office">
    @{{#dataOffice}}
    <tr>
        <td>
            <p class="m-0 font-weight-normal">@{{ office_name }}</p>
        </td>   
        @{{#employee}}
        <td>
            <p class="mb-0 text-muted">@{{ name}}</p>
        </td>
        <td>
            <p class="mb-0 text-muted">@{{ type}} Ton</p>
        </td>
        @{{/employee}}
    </tr>   
    @{{/dataOffice}}
</template>

My question is, how to show data office_name, name and type ? if console.log in javascript, i must write like this

console.log(data['Malaysia-office'].employee[1]['capacity'])

score 0 · Answer 1 · answered Aug 20 '19 at 11:52

if your json structure like that, you can use this code

var c = [];
$.get(url, function (data, textStatus, xhr) {
    var j = 0;
    _.each(data, (o,i) => {
           c.push({'key':i,'value':data[i]})

    });
    $('#office-wrapper').html('');
    $('#office-wrapper').append(Mustache.render($('#section_per_divre').html(), {
         dataOffice: c,
    }));
});

Mustache templeting Probrem with Nested Object

1 Answers1