Creating Links in List.js

I'm using List.js to generate lists (obviously), however I'm having trouble creating links inside of the list items.

Here's my code so far --

<script>

  var options = {
    valueNames: [ 'title', 'description', 'lat', 'lng', 'user_sub', 'location', 'imageurl'],
    item: '<li><h3 class="title"></h3><p class="description"></p><p class="location"></p><p class="user_sub"></p></li>'
  };

  var values = JSON.parse('{{ jsonout|safe }}');

  var userList = new List('users', options, values);

</script>

That creates a nice list, however I want to join the lat and lng ValueNames together to create a list, normally I would do something like this (an example from Google Maps that I've used)

'<a href=http://www.google.com/maps/place/' + data.lat+ ',' + data.lng + '/@' + data.lat + ',' + data.lng +',6z target=_blank>Get Directions</a>'

However, since all the items are created in the HTML class section, this doesn't work. Any suggestions on how to make it work, or maybe its not an option with this plugin?

Solution

Try to parse JSON data to the format you want BEFORE you bind the values to List.js

   var values = JSON.parse('{{ jsonout|safe }}');
    for(var i=0; i<values.length; i++) {
        var data= values[i];
        item.link = '<a href=http://www.google.com/maps/place/' + data.lat+ ',' + data.lng + '/@' + data.lat + ',' + data.lng +',6z target=_blank>Get Directions</a>'
    }

You now have a new property link which can be used like any other property.