Returning Nested Object of JSON Data to Mustache Template Using jQuery getJSON

Question

I have links for individual people below in my HTML and on click it should make an Ajax request that populates a mustache template with the correct info for the specific person. What I am trying to do in the JQuery script is use the value attribute in my HTML to identify a nested object within the JSON File to be returned to the template. In the script I have turned this into the variable personIdentifier. Is there any way to use this variable to return only the person specific nested JSON to the template? I am not sure how this could be done. Or if there is an overall better way to do this than my approach. I hope I am explaining this correctly, please feel free to ask me any questions. I feel I am so close, any help would be greatly appreciated.

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

Here is the people.json file (structure can be changed if necessary):

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

Answer 1

One method could be to change your JSON so that each person has a boolean (true or false) value, then using Mustache's templating system you could check all the people and render only those who have the specific value true - which you would set once you have received your response from the server.

UPDATE : You will also need to turn "people" into an array so that it can iterate over each of the individual people... (the JSON below shows this)

So for example your JSON would look like this...

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

Now once you get your response from the server you would edit the JSON so that the matching person has the property showPerson set to true...

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

Now in your Mustache template you would simply have to use the built in false values check , if it is false then it won't render...

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