CODEWITHSUNDEEP
jqueryhtmlappend
Laxmikant
Laxmikant

Reputation: 2226

jQuery.append not working

I'm trying to iterate an array of JSON object to create a dropdown like this but using nested ul li. It seems this simple code is not working. It generates the ul li as expected but .append is not working. I'm not getting the reason. JSFiddle

<form action="save/" method="post">
    <div class="select"></div>        
</form>

Javascript

var jsn = [
    {
        "home": "Home",
        "solutions": {
            "education": "Education",
            "financial_services": "FinancialServices",
            "govt": "Government"
        },
        "products": {
            "PCProducts1": "PCPROducts1",
            "PCProducts2": "PCPROducts2",
            "PCProducts3": "PCPROducts3"
        }
    }
];

function iterObject(jsn, select){
    $.each(jsn, function(key, val){
        if(isplain(val)){
            ret = createOption(key, val);
            $(select).append(ret); //This code is not working
        }else{
            ret = createGroup(key);
            iterObject(val, ret)
        }
        console.log("ret", ret); // This prints expected output         
    });
}
function createOption(val, txt){
    return '<li rel="'+val+'">'+txt+'</li>';
}
createGroup = function (grpname){
    return  '<ul "class"="optiongroup"  "label"='+grpname+'></ul>';
};
function isplain(data){
    if (typeof data === 'number' || typeof data === 'string'){return true;}else{ return false;}
}
iterObject(jsn, '.select');

NOTE UPDATE - Code was not finished while the query was asked. So code in query will not show ul and lis nested. As of now, It should display all theul n lis in .select.

Upvotes: 2

Views: 733

Answers (4)

Mehul Saiya
Mehul Saiya

Reputation: 49

Correct the selector:

$('.select').append(ret);

Also, You would need to var scope 'ret' variable as below:

function iterObject(jsn, select){
var ret; 
//Rest of the code
}

JSFiddle

Upvotes: 1

angellica.araujo
angellica.araujo

Reputation: 298

I think this question is interesting as it is related with recursion. Here is my code

JS

var jsn = [
    {
        "home": "Home",
        "solutions": {
            "education": "Education",
            "financial_services": "FinancialServices",
            "govt": "Government"
        },
        "products": {
            "PCProducts1": "PCPROducts1",
            "PCProducts2": "PCPROducts2",
            "PCProducts3": "PCPROducts3"
        }
    }
];

var menuBuilder = (function() {

    var isLeaf= function(obj) {
        return typeof obj !=='object';
    };

    var buildItems = function(objlist) {
        var expected= '';
        var items;

        $.each(objlist, function(key, val) {      

            if(!isLeaf(val)) {
                items= buildItems(val);

                expected+= '<li>' + key;
                expected+= '<ul>' + items + '</ul>';
                expected+= '</li>';
            } else {
                expected+= '<li>' + val + '</li>';
            }
        });

        return expected;
    };    

    var read = function(json) {
        var items= buildItems(json);
        var expect= '';

        if(items==='') return expect;

        expect += '<ul>';
        expect += items;
        expect += '</ul>';

        return expect;
    };

    return {
        read: read
    };

})();


$('#container').append(menuBuilder.read(jsn[0]));

HTML

<div id="container"></div>

Upvotes: 0

Anton F
Anton F

Reputation: 328

Now it's working: https://jsfiddle.net/2kd0p25n/

function iterObject(jsn, select){
    $.each(jsn, function(key, val){
        if(isplain(val)){
            ret = createOption(key, val);
            $(".optiongroup").last().append(ret);
        }else{
            ret = createGroup(key);
            $(select).append(ret);
            iterObject(val, '.select')
        }         
    });
}
function createOption(val, txt){
    return '<li rel="'+val+'">'+txt+'</li>';
}
createGroup = function (grpname){
    return  '<ul class="optiongroup"  "label"='+grpname+'></ul>';
};
function isplain(data){
    if (typeof data === 'number' || typeof data === 'string'){return true;}else{ return false;}
}
iterObject(jsn, '.select');

Upvotes: 3

Sagi
Sagi

Reputation: 9294

function iterObject(jsn, select){
   $.each(jsn, function(key, val){
        if(isplain(val)){
           ret = createOption(key, val);
           $(select).append(jQuery(ret)); //This code is not working
       }
       else{
           ret = createGroup(key);
           var jQret = jQuery(ret);
           jQuery(select).append(jQret );
           iterObject(val, jQret);
       }
       console.log("ret", ret); // This prints expected output
   });
}

Upvotes: 0

Related Questions