如何使用 mustache js 呈现嵌套数据元素？

Question

我在模板中使用 txt.general_1.value 来显示它的值，但它在控制台中显示错误 Can't find txt.general_1.value in [object Object]
但是如果我只是在模板中使用 txt，它会显示 [object Object]
以下是代码。请帮助我解决这个问题。
请注意，以下代码只是为了重现问题，实际数据不同。

<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>

Answer 1

我尝试重现代码片段中的问题，但没有发现任何问题。该值已正确呈现。检查您应用中的 json_obj，也许它并不总是包含 txt.general_1.value 属性。

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>

如何使用 mustache js 呈现嵌套数据元素？

How to render nested data elements using mustache js?

javascript

nested

mustache