Creating Links in List.js

Question

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?

Gonzalo.- · Accepted Answer · 2017-03-28 02:07:24Z

1

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.

edited Mar 28, 2017 at 2:07

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

answered Mar 28, 2017 at 1:44

ThiagoPXP

5,4823 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BrettJ Over a year ago

I didn't use your answer specifically but it did set me on the right track. I ended up adding the link to the JSON from Flask on the back end, and then sending it over in the JSON.parse('{{ jsonout|safe }}') variable. Thanks for your help, I appreciate it!

Collectives™ on Stack Overflow

Creating Links in List.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related