How to dynamically create multiple UL LI from a loop - javascript/jquery/magento

Question

I am trying to read a global variable created by magento-spConfig and create multiple unordered lists based on it. My Javascript code:

   if(typeof spConfig !='undefined'){
    if(typeof spConfig[0] == 'undefined' ) {
        spConfig[0] = spConfig;
    }
    var index  = 0 , count = spConfig.length?spConfig.length:1;
    for( var index  = 0 ; index<count;index++) {
        if(typeof spConfig != 'undefined' && typeof spConfig[index].config != 'undefined' && typeof spConfig[index].config.attributes != 'undefined') {
            for(var attributeID in spConfig[index].config.attributes) {

               //alert(attributeID) gives (the number of ul's i want)
                var ul = jQuery('<ul id="clone'+attributeID+'"></ul>');

                for(var optionID in spConfig[index].config.attributes[attributeID].options) {
                    var option = spConfig[index].config.attributes[attributeID].options[optionID];
                    if(typeof option == 'object') {

                       // alert(option.label); gives the number of li's i want

                        var li = $('<li>'+option.label+'</li>');
                        jQuery(".price-info").append(li);
                        jQuery(".price-info").append(ul);

                    }
                }
            }
        }
    }
}

At the end, i am hoping to append the Ul's to some content on my page. The code above is only creating empty UL's. The LI's are not populated.

Please help.

You must append the LIs to the UL then append the UL to .price-info: ul.append(li); jQuery(".price-info").append(ul); But beware, this could be optimized, concatening a string in loop or using document fragment. Using append() in loops like that is really slow — A. Wolff
– A. Wolff, Commented Apr 30, 2015 at 12:16
So are you sure jQuery(".price-info") doesn't return a jq empty object? Anyway, you should provide minimalistic sample in question which replicates your issue — A. Wolff
– A. Wolff, Commented Apr 30, 2015 at 12:20
nope the div is not a jq empty obj..i think the appending etc, should not be done in the place it is now.. — wasiim_dev
– wasiim_dev, Commented Apr 30, 2015 at 12:23
jQuery(".price-info").append(ul); should be in the outter for loop, after the inner one. BUT the ul.append(li); is at the right place — A. Wolff
– A. Wolff, Commented Apr 30, 2015 at 12:25

chazsolo · Accepted Answer · 2015-04-30 12:17:30Z

5

You should be appending the lis into the ul first.

ul.append(li);
$('.price-info').append(ul);

answered Apr 30, 2015 at 12:17

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

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

7 Comments

wasiim_dev Over a year ago

It is giving me the same result :(

wasiim_dev Over a year ago

i think i am not appending at the right place..could be i should do it in the next loop

chazsolo Over a year ago

@wasiim_dev It might be beneficial to put your code in a jsfiddle to replicate what you are trying to do

chazsolo Over a year ago

What is spConfig right before you begin checking against it? Put that in your fiddle instead of using new Product.Config

wasiim_dev Over a year ago

spConfig contains all the data i need to construct the ul li. I just copied the code i have from my view/source. That is all i have really

|

Collectives™ on Stack Overflow

How to dynamically create multiple UL LI from a loop - javascript/jquery/magento

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related