jQuery.append not working

Question

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.

@BFDatabaseAdmin - I'm using python -django, I don't think that has anything to do with the query. — Laxmikant
– Laxmikant, Commented Oct 23, 2015 at 10:23
did you tried to log ret? put this code before append. console.log(ret); — Ruben Yeghikyan
– Ruben Yeghikyan, Commented Oct 23, 2015 at 10:29
could you please check for $(select).size() if it is 1 ? and if $(select) is an element or an array? — morels
– morels, Commented Oct 23, 2015 at 10:34

Anton F · Accepted Answer · 2015-10-23 10:47:36Z

3

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

answered Oct 23, 2015 at 10:47

Anton F

3281 silver badge8 bronze badges

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

10 Comments

Anton F Over a year ago

First of all. The <ul> tags never get appended. This makes <li> tags go nowhere. Then, the original '.select' selector will be used on only the first iteration. Which is wrong also.

Laxmikant Over a year ago

@AntonF -Great! +1 for your code .last().append(), This made my work more easy. I was about to use if else to achieve that.

Laxmikant Over a year ago

@RayonDabre - Don't mind, But I have asked this query because my code was not working. I think Mehul pointed out the actual bug in my code. Also I appreciate AntonF's answer. It saved my lot of time. But can't accept two answers at a time.

Rayon Over a year ago

@Laxmikant, you certainly can not accept 2 answers but you need to consider the efforts and quality of answer while accepting. Getting all the li elements was not the intention of the code anyways..

Rayon Over a year ago

No, It would not. One could easily make out the purpose of createGroup

|

Mehul Saiya · Accepted Answer · 2015-10-29 09:01:46Z

1

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

edited Oct 29, 2015 at 9:01

answered Oct 23, 2015 at 10:41

Mehul Saiya

494 bronze badges

5 Comments

Anton F Over a year ago

it makes all <li> tags go into <div>. Where are the <ul>'s?

Laxmikant Over a year ago

@AntonF, No it's not his fault. My code has not finished yet. I guess its output is correct.

angellica.araujo Over a year ago

Declaring variables is important, but this is not the solution. "Declaring a variable anywhere in the code is equivalent to declaring it at the top". He calls "iterObject" inside the "each" fn. It makes no difference if he has the var statement at the function top. Check out "var hoisting" @ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Mehul Saiya Over a year ago

Yes, I agree adding var is not the solution. Correct usage of selector is the solution. Along, with the solution I just highlighted the issue in code.

angellica.araujo Over a year ago

@MehulSaiya Yes, agree with u. The correct usage of selector is the solution. You could have highlighted the issue suggestion before proposing him to add variable statement, avoiding "also" word before your real answer. Just a suggestion

Sagi · Accepted Answer · 2015-10-23 10:42:50Z

0

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
   });
}

answered Oct 23, 2015 at 10:42

Sagi

9,3643 gold badges38 silver badges43 bronze badges

Comments

angellica.araujo · Accepted Answer · 2015-10-27 19:04:55Z

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>

Collectives™ on Stack Overflow

jQuery.append not working

4 Answers 4

10 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related