jQuery nested list from JSON not working. [solved, but comes another]

Question

I'm creating a nested nested nested list, but I'm having problem assigning my buffer inside a UL. I tried $('ul#lists').html(buffer) but it didn't print out...

JSON

{
"browse": [
    { 
        "name":"browse by state" , 
        "command":"state" }, 

    { 
        "name":"browse by equipment" , 
        "command":"equipment" }, 

    { 
        "name":"browse by brand" , 
        "command":"brand" }
]
}

HTML

<section id="browser">
        <ul id="lists"></ul>
</section>

JQuery

$(function(tree_click){
    $('ul#lists').on('click','.c',function(){
    var test = "";
    $(this).removeClass('c'); //To assign this event once

    $.get('scripts/list.json', function(result, status){    
        var buffer = "";
        $.each(result, function(i, val){            
            for(var i=0; i < val.length; i++){ 
            var item = val[i];
            buffer+="<li><a href='#' cmd='"+item.command+"'>"+item.name+"</a></li>";} 
        });
        $(e.target).parent().append(buffer);
    });
});
});

The problem is solved. I updated my question with the solution.

But now my list toggler isn't working.

I use this for the toggler,

$(function(toggle_list){
$("#lists").on('click','a', function() {
    return !($(this).parents("li:first").find("ul:first").slideToggle('fast'))
});
});

Any takes?

have your tried dumping your $.get results using console.log(result) to see whether your results are returning as you expect? — scrowler
– scrowler, Commented Oct 29, 2013 at 3:54
Yup. My jSON is valid and it returns the result as expected. I even console.log(buffer) and it works as expected. But the problem lies to how should I nest the <li> inside <ul>, like this <ul id=lists><li>result1<ul><li>result1.2</li></ul></li></ul> — rolodex
– rolodex, Commented Oct 29, 2013 at 3:59
@Snowburnt append did the job! How did I miss that. How do I assign this append only to the button that is clicked? I tried using $(this) but somehow it lies inside the $.get method. — rolodex
– rolodex, Commented Oct 29, 2013 at 4:40
@rolodex did you try declaring buffer inside the tree_click function? Also, start off the click handler with function(e), e is the click event. use $(e.target) to get the button jquery object — Snowburnt
– Snowburnt, Commented Oct 29, 2013 at 4:42

Snowburnt · Accepted Answer · 2013-10-29 04:45:33Z

1

change:

$('ul#lists').on('click','.c',function(){

to:

$('ul#lists').on('click','.c',function(e){

specify var buffer inside this function but before the $.get call.

To append to the clicked UL, go like this inside the click handler:

$(e.target).append(buffer);

answered Oct 29, 2013 at 4:45

Snowburnt

6,9558 gold badges33 silver badges44 bronze badges

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

1 Comment

rolodex Over a year ago

Thanks! I used $(e.target).parent().append(buffer). Works gracefully, but now, my list toggler isn't working!

Arun P Johny · Accepted Answer · 2013-10-29 04:04:37Z

0

Assuming the click event is called and the ajax request is successful and it is returning an array, there is a problem with var item = val[i]; because val itself is the current item in the array.

$(function (tree_click) {
    $('#lists').on('click', '.c', function () {
        $(this).removeClass('c'); //To assign this event once

        $.get('scripts/list.json', function (result, status) {
            var buffer = $.map(result, function (item) {
                return "<li><a href='#' cmd='" + item.command + "'>" + item.name + "</a></li>";
            }).join('');
            $('#lists').html(buffer);
        });
    });
});

answered Oct 29, 2013 at 4:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

rolodex Over a year ago

This will result for only ONE object in the array.

rolodex Over a year ago

I've updated my question with the JSON. I want to print the sample json nested into a new ul inside ul#lists so the parent can have more children.

rolodex Over a year ago

"so the parent can have more children"...It's funny to read that after 4 years.

Collectives™ on Stack Overflow

jQuery nested list from JSON not working. [solved, but comes another]

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related