I am using txt.general_1.value in template to display its value but it shows error in console Can't find txt.general_1.value in [object Object]
But if I just use txt in template, it displays [object Object]
Following is the code. Kindly help me in resolving this issue.
Please note that following code is just to reproduce the problem, actual data is different.
<script>
var json_obj =
{
"all": [
{
"row": "row",
"column": "col-md-6",
"txt": {
"general_1": {
"type": "a",
"value": "aaa - Hello world"
},
"general_2": {
"type": "b",
"value": "bbb - Hello world"
},
"general_3": {
"type": "c",
"value": "ccc - Hello world"
}
}
}
]
};
var data = json_obj['all'][0];
var template = "<div class=\"{{row}}\"><p class=\"{{column}}\">{{txt.general_1.value}}</p></div>";
var text = Mustache.render(template, data);
$('#target').html(text);
</script>
I tried to reproduce the problem in the code snippet but didn't see any issue. The value is rendered correctly. Check the json_obj in your app, maybe it doesn't always contain the txt.general_1.value properties.
var json_obj = {
"all": [{
"row": "row",
"column": "col-md-6",
"txt": {
"general_1": {
"type": "a",
"value": "aaa - Hello world"
},
"general_2": {
"type": "b",
"value": "bbb - Hello world"
},
"general_3": {
"type": "c",
"value": "ccc - Hello world"
}
}
}]
};
var data = json_obj['all'][0];
var template = "<div class=\"{{row}}\"><p class=\"{{column}}\">{{txt.general_1.value}}</p></div>";
var text = Mustache.render(template, data);
$('#target').html(text);<script src="https://unpkg.com/mustache@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target"></div>