CODEWITHSUNDEEP
javascriptjqueryhtml
dsmonkey
dsmonkey

Reputation: 47

Separate html and js for a list

Hi I am trying to insert a list of JS objects (with multiple attributes) into a html list. In my html I have a simple list markup

<ul class="list">
    <li class='list-item'>
        <span class='date'></span>
        <span class='lan'></span>
        <span class='topic'></span>
        <span class='speaker'></span>
        <a class ='play' title='Listen' href=""><i class='fa fa-play-circle-o'></i></a>
        <a class ='download' title='Download' href=""><i class='fa fa-download'></i></a>
    </li>
</ul>

In the JS file, I have a variable named values contains those object with a piece of code

for (var i = values.length - 1; i >= 0; i--) {
    $(".date").append(values[i].date);
    $('.lan').append(values[i].lan);
    $('.topic').append(values[i].topic);
    $('.speaker').append(values[i].speaker);
    $('.play').attr('href', values[i].play);
    $('.download').attr('href', values[i].link);
};

The result is there is only one list-item and the values just keep concat. I think I should create multiple "list-item" but I gave a couple tries and haven't been succeed. Could anyone give me some hints or help. Thx.

Upvotes: 2

Views: 90

Answers (4)

Aᴍɪʀ
Aᴍɪʀ

Reputation: 7803

You can create a li tag, put your variables in there and then append the whole thing to your .list.

for (var i = values.length - 1; i >= 0; i--) {
    var item = $("<li class='list-item'>\
        <span class='date'></span>\
        <span class='lan'></span>\
        <span class='topic'></span>\
        <span class='speaker'></span>\
        <a class ='play' title='Listen' href=''><i class='fa fa-play-circle-o'></i></a>\
        <a class ='download' title='Download' href=''><i class='fa fa-download'></i></a>\
        </li>");
    item.find(".date").append(values[i].date);
    item.find('.lan').append(values[i].lan);
    item.find('.topic').append(values[i].topic);
    item.find('.speaker').append(values[i].speaker);
    item.find('.play').attr('href', values[i].play);
    item.find('.download').attr('href', values[i].link);
    $(".list").append(item);
};

You also need to clean out your ul tag. It should contain nothing as the script will add the item's li tag itself.

You might also change the inner .appends to .text or .html, depending on your requirements.

See this plunker.

Upvotes: 1

DolceVita
DolceVita

Reputation: 2100

Well, I do not suggest you to use the approach you have in the code. In your case I would have something like this (try it):

    var list = $('.list');
   list.empty();
 for (var i = values.length - 1; i >= 0; i--) {

  var t = $('<li class="list-item" />');
  t.append('<span class="date">' + values[i].date + '</span>');
  t.append('<span class="lan">' + values[i].lan + '</span>');
  t.append('<span class="topic">' + values[i].topic + '</span>');
  list.append(t);

 }
});

Upvotes: 0

Ludovic C
Ludovic C

Reputation: 3065

The best way to accomplish this is to use templates. You can use a template engine (moustache, etc.) or do it yourself : 

<script type = "text/template" id="template">
  <li>
    <span class="a"></span>    
    <span class="b"></span>
  </li>
</script>

<script type="text/javascript">

    var values = [
      {a : 1, b : 2},
      {a : 2, b : 3}
    ]

    for (var i = values.length - 1; i >= 0; i--) {
      var value = values[i];
      var element = $($('#template').html());
      element.find('.a').html(value.a);
      element.find('.b').html(value.b);
      $('.list').append(element);
    };


</script>

<ul class="list">

</ul>

Upvotes: 3

Franco
Franco

Reputation: 2329

You are appending the values which is not what you want.

try to pass only the variable in the span:

$(".date").text(values[i].date);

This is the simple way according with your markup.

Alternatively you can use @Amir answer creating a complete new 'li' element and then append it.

Upvotes: 0

Related Questions