CODEWITHSUNDEEP
javascriptjquery
John Brk
John Brk

Reputation: 67

How to itarate though json response in jquery

Check the code bellow. Here i am trying to append a list of html menu to CollapsibleItemPlaceHolder div. And the list contents are dynamic, some values are coming from json response. Problem is that in output i can see its printing like this: [object Object],[object Object],[object Object] How can i get access to these objects in this scenario? You can see i already tried to access object value using +value.MenuName+ but its not working.

Note: I have attached json response console.log and the output screen shot with this question please check.

json picture output picture

Html:

<div class="accordion-group" id="CollapsibleItemPlaceHolder">
</div>

Jquery:

//load assigned menu
$(".editItemText").on("click", function () {
    $("#CollapsibleItemPlaceHolder").empty();
    var categoryId = $(this).attr("data-productId");
    $('#btnSaveMenu').attr('categoryId', categoryId);
    $.post("/Demo/GetAssignedMenu", { CategoryId: categoryId }).done(function (data) {
        var data_obj = JSON.parse(data);
        console.log(data_obj);
       $("#CollapsibleItemPlaceHolder").append(`` +
            $.each(data_obj, function (key, value) {
               
                +`<div class="EachCategorySet">
                     <div class="accordion-heading">
                         <a class="accordion-toggle" data-toggle="collapse" href="#child_b">
                             <small>`+value.MenuName+`</small>
                         </a>
                         <div style="padding-left:16px; float:right; margin-top:-40px;" class="checkbox">
                             <label class="checkbox-container">
                                 <input type="checkbox" class="css-checkbox parent_checkbox" name="selectall" />
                                 <span data-ripple class="bg-primary-darker checkmark"></span>
                             </label>
                         </div>
                     </div>
                </div>`+''


            })
        +``);
    });
});

Upvotes: 0

Views: 32

Answers (1)

Nayem_43
Nayem_43

Reputation: 316

Try this:

$(".editItemText").on("click", function () {
        $("#CollapsibleItemPlaceHolder").empty();
        var categoryId = $(this).attr("data-productId");
        $('#btnSaveMenu').attr('categoryId', categoryId);
        $.post("/Demo/GetAssignedMenu", { CategoryId: categoryId }).done(function (data) {

            if(data.length > 0){
                var _html = "";
                for (var i = 0; i < data.length; i++) {
                    _html += "<div class='EachCategorySet'>"
                        + "<div class='accordion-heading'>"
                        + "<a class='accordion-toggle' data-toggle='collapse' href='#child_b'>"
                        + "<small>" + data[i].MenuName + "</small>"
                        + "</a>"
                        + "<div style='padding-left:16px; float:right; margin-top:-40px;' class='checkbox'>"
                        + "<label class='checkbox-container'>"
                        + "<input type='checkbox' class='css-checkbox parent_checkbox' name='selectall' />"
                        + "<span data-ripple class='bg-primary-darker checkmark'></span>"
                        + "</label>"
                        + "</div>"
                        + "</div>"
                        + "</div>"
                }

                $("#CollapsibleItemPlaceHolder").append(_html);
            }
        });
    });

Note: As you do not share the actual design I just write the way of iterating the data. Change the HTML if you need it as per your requirement.

Upvotes: 1

Related Questions