How to build a ul li dynamically from two arrays - Jquery

Question

I have got to build a carousel dynamically from two arrays, as follows:

var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg];

To start with, i only have the div class flexslider

I need to build my ul li so that my final html outputs the following:

<div class="flexslider">

<ul class="slides">

    <li ean="123456789">

        <img src="/assets/image1.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>   

    <li ean="234567891">

        <img src="/assets/image2.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>

    <li ean="345678912">

        <img src="/assets/image3.jpg" alt="pix" draggable="false">

        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
            <i aria-hidden="true" class="icon icon-close-neg">
                <span class="sr-only">Remove</span>
            </i>
        </a>

    </li>

</ul>

Please note that the first item in arrayBarcode matches with the first item in arrayPath, etc..

Any help would much be appreciated..

Thanks..

Have you tried anything yet? Give us some code samples. If you haven't, you can try looping though the arrays and just selecting the same index on both of them. This will, however, break if the elements on both arrays are not matched. — Pankucins, Mar 19 '14 at 07:04
I am building the array as follows: var thecookie = $.cookie(COOKIETOPRINT); var cookies = thecookie.split("|"); cookies.forEach(function(item){ var barcode= item.split('~')[0]; var path = item.split('~')[2]; arrEan.push(barcode); arrPath.push(path); — Wasiim, Mar 19 '14 at 07:05
i tried to follow the same logic as in: http://stackoverflow.com/questions/5881033/how-to-generate-ul-li-list-from-string-array-using-jquery but with no success :( — Wasiim, Mar 19 '14 at 07:07

Sridhar R · Accepted Answer · 2014-03-19T07:16:36.813

2

Try this

var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];

var output='<ul class="slides">';
for(var i in arrayBarcode)
{
    output+='<li ean="'+arrayBarcode[i]+'">\
        <img src="'+arrayPath[i]+'" alt="pix" draggable="false">\
        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons"\ title="Remove" href="#">\
            <i aria-hidden="true" class="icon icon-close-neg">\
                <span class="sr-only">Remove</span>\
            </i>\
        </a>\
     </li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);

DEMO

edited Mar 19 '14 at 07:16

answered Mar 19 '14 at 07:08

Sridhar R

20,190
6
38
35

1

There's no need for 2 loops, since, *if* the arrays are always synced, they will both have the same index, not to mention that your code will always return the last element of the nested `for()` loop because you append to the output *after* the nested loop! (Which would still return the wrong values) – Pankucins Mar 19 '14 at 07:12
forgot to mention.. i do not have the ul.slides as well initially – Wasiim Mar 19 '14 at 07:17
so this line will never be executed: $('.slides').empty().append(output); – Wasiim Mar 19 '14 at 07:18
Well Done Sridhar !! Works perfect. Thank you – Wasiim Mar 19 '14 at 07:21

score 1 · Answer 2 · edited May 23 '17 at 12:11

Looping through a JavaScript Array is pretty simple. Think about visiting each index of arrays and assign them or a better approach, append to our UL with class slides First answer was good but not enough since using FOR-IN for Arrays is a bad practice, of course you could choose by having all List Items inside a local variable (as Sridhar R's example) or by append individually.

Here is sample code, didn't tested:

    var arrayBarcode = [123456789, 234567891, 345678912],
        arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg],
    $slides = $('.slides'); // If only one single class available on your HTML Doc
    if (arrayBarCode.length != arrayPath.length)
    {
     console.log('Both array should be the same size');
     return;
    }

    for (var i = 0; i < arrayBarcode.length; i++)
    {
     var html= '<li ean="' + arrayBarcode[i] + '">\
        <img src="' + arrayPath[i] + '" alt="pix" draggable="false">\
        <a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
            <i aria-hidden="true" class="icon icon-close-neg">\
                <span class="sr-only">Remove</span>\
            </i>\
        </a>\
    </li>';
    $slides.append(html);
}

Kyo · Answer 3 · 2014-03-19T07:20:05.253

Roughly, it would look as below:

$('div.flexslider').append('<ul class="slides"></ul>');
var aElement = $('<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
        <i aria-hidden="true" class="icon icon-close-neg">
            <span class="sr-only">Remove</span>
        </i>
    </a>');

$.each(arrayBarcode, function(index, value){
     var liElement = $('<li></li>').attr('ean', value);
     var imgElement = $('<img alt="pix" draggable="false">').attr('src', arrayPath[index]);
     liElement.append(imgElement).append(aElement.clone());
     $('ui.slides').append(liElement);
});

Plus, the array arrayPath is missing "":

var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];

How to build a ul li dynamically from two arrays - Jquery

3 Answers3