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
– Pankucins, Commented Mar 19, 2014 at 7: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
– Wasiim, Commented Mar 19, 2014 at 7:05
i tried to follow the same logic as in: stackoverflow.com/questions/5881033/… but with no success :( — Wasiim
– Wasiim, Commented Mar 19, 2014 at 7:07

Sridhar R · Accepted Answer · 2014-03-19 07:16:36Z

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, 2014 at 7:16

answered Mar 19, 2014 at 7:08

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

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

4 Comments

Pankucins Over a year ago

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)

Wasiim Over a year ago

forgot to mention.. i do not have the ul.slides as well initially

Wasiim Over a year ago

so this line will never be executed: $('.slides').empty().append(output);

Wasiim Over a year ago

Well Done Sridhar !! Works perfect. Thank you

Community · Accepted Answer · 2017-05-23 12:11:10Z

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 · Accepted Answer · 2014-03-19 07:20:05Z

0

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'];

edited Mar 19, 2014 at 7:20

answered Mar 19, 2014 at 7:14

Kyo

9645 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related