使用jQuery getJSON将JSON数据的嵌套对象返回到Mustache模板

Question

我在HTML的下面有个人链接，单击该链接时，它应该发出Ajax请求，并使用特定人的正确信息填充胡须模板。 我要在JQuery脚本中尝试做的是使用HTML中的value属性来标识要返回模板的JSON文件中的嵌套对象。 在脚本中，我将其变成了变量personIdentifier。 有什么方法可以使用此变量将仅特定于人员的嵌套JSON返回到模板？ 我不确定如何做到这一点。 或者，是否有比我的方法更好的整体方法。 希望我能正确解释，请随时问我任何问题。 我觉得我是如此亲密，任何帮助将不胜感激。

<div class="clicky" value="jamie">
<a href="">Jamie Info</a>
</div>

<div class="clicky" value="dave">
<a href="">Dave Info</a>
</div>

<script id="people-template" type="text/template">
<div>{{name}}</div>
<div>{{achievements}}</div>
</script>

<script type="text/javascript">
 $(document).ready(function() {
 $('.clicky').click( function (event) {
     event.preventDefault(); //to stop from following clicked link
     var personIdentifier = $(this).attr('value');

     $.getJSON( "people.json", function( data ) {
        var template = $('#people-template').html();

        // something here to change the JSON so it 
        // only returns specific persons array/object

        var info = Mustache.to_html(template, data);
        $( ".result" ).html( info );


     });
</script>

这是people.json文件（如有必要，可以更改结构）：

    { "people" : {
        "jamie" : [
            {
                "name" : "Jamie Smith",
                "achievements" : "lots of stuff"
            }
        ],
        "dave" : [
            {
                "name" : "Dave Berns",
                "achievements" : "lots of things"
            }
        ]    
    }
    }

Answer 1

一种方法是更改​​您的JSON，以使每个人都有一个布尔值(true or false) ，然后使用Mustache的模板系统，您可以检查所有人员并仅渲染那些具有特定值true -一旦您设置了该值已收到服务器的回复。

更新：您还需要将“ people”转换为数组，以便可以遍历每个个人...（下面的JSON显示了这一点）

例如，您的JSON看起来像这样...

{ 
 "people" : [
    "jamie" : [
        {
            "showPerson" : false
            "name" : "Jamie Smith",
            "achievements" : "lots of stuff"
        }
    ],
    "dave" : [
        {
            "showPerson" : false
            "name" : "Dave Berns",
            "achievements" : "lots of things"
        }
    ]    
  ]
}

现在，一旦您从服务器获得响应，就可以编辑JSON，以便匹配的人将showPerson属性设置为true ...

"dave" : [
        {
            "showPerson" : true //You can use jQuery to easily do this...
            "name" : "Dave Berns",
            "achievements" : "lots of things"
        }
    ]    

现在在您的Mustache模板中，您只需要使用内置的false values check ，如果为false则将不会呈现...

<script id="people-template" type="text/template">
    {{#people...showPerson}} //If "showPerson" is `false` this will not render, meaning only the individual you filtered for will display...
        <div>{{name}}</div>
        <div>{{achievements}}</div>
    {{/showPerson}}
</script>