Javascript 如何在jquery中通过json响应初始化

检查下面的代码。在这里，我试图将html菜单列表附加到

collapsableItemPlaceholder

div。列表内容是动态的，一些值来自json响应。问题是，在输出中，我可以看到它是这样打印的：

[object object]，[object object]，[object object]

在这种情况下，我如何访问这些对象？您可以看到，我已经尝试使用

+value.MenuName+

访问对象值，但它不起作用

注意：我已附上json响应

控制台。日志和带有此问题的输出屏幕截图，请检查



Html:



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>`+''


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

//加载指定菜单
$（“.editItemText”）。在（“单击”，函数（）{
$（“#可折叠项占位符”）.empty（）；
var categoryId=$（this.attr（“数据产品ID”）；
$（'btnsavemunu'）.attr（'categoryId'，categoryId）；
$.post（“/Demo/GetAssignedMenu”，{CategoryId:CategoryId}）.done（函数（数据）{
var data_obj=JSON.parse（数据）；
控制台日志（数据对象）；
$（“#可折叠项占位符”）.append（`+
$。每个（数据对象、功能（键、值）{
+`
`+''
})
+``);
});
});
试试这个：

$(".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);
            }
        });
    });

$（.editItemText”）。在（“单击”上，函数（）{
$（“#可折叠项占位符”）.empty（）；
var categoryId=$（this.attr（“数据产品ID”）；
$（'btnsavemunu'）.attr（'categoryId'，categoryId）；
$.post（“/Demo/GetAssignedMenu”，{CategoryId:CategoryId}）.done（函数（数据）{
如果（data.length>0）{
var_html=“”；
对于（变量i=0；i

注意：由于您不共享实际设计，我只编写了迭代数据的方法。根据需要更改HTML

$(".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);
            }
        });
    });