Fatal编程技术网

在Javascript中连接Json对象

javascript jquery json

在Javascript中连接Json对象,javascript,jquery,json,Javascript,Jquery,Json,我有一个如下所示的html列表： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Menu</title> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="s

我有一个如下所示的html列表：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Menu</title>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <button class="btn btn-success" type="submit" id="Save">Save</button>
        <ol class="example">
            <li>
                <i class="fa fa-image" data-toggle="popover"></i>
                <span contenteditable="true" onclick="this.focus();"> m1</span>
                <ol class="">
                    <li data-formid="ACC:ACC01" data-formdesc="Account" contenteditable="true" onclick="this.focus();" class="">Account (ACC:ACC01)<i class="fa fa-angle-double-right fa-2x move_right"></i></li>
                </ol>
            </li>
            <li>
                <i class="fa fa-image" data-toggle="popover"></i>
                <span contenteditable="true" onclick="this.focus();"> m2</span>
                <ol class="">
                    <li data-formid="ACC:ACC05" data-formdesc="Account Details Listing" contenteditable="true" onclick="this.focus();" class="">Account Details Listing (ACC:ACC05)<i class="fa fa-angle-double-right fa-2x move_right"></i></li>
                </ol>
            </li>
        </ol>
        <script>
        $(document).ready(function(){
            $("#Save").click(function() {
                MenuID = '1';
                var Item = [];
                var MenuItems = []; // used to store list item into an array
                var jsonItemParent = {}; // used to store parent list in JSON Object
                var jsonItemChild = {}; // used to store child list in JOSON Object
                var jsonMenuItems = []; // used to store Object of JSON parent list and cild list
                var li = $('ol.example:last > li').length;

                $('ol.example:last > li').each(function(i,e){
                    if($(this).children('ol').children('li').length >= 1){
                        $(this).children('ol').children('li').each(function(ii,ee){

                            var parentOfChild = $(this).parent().prev().text().trim();
                            var child = $(this).text().trim();
                            var ItemIDofParent = MenuID+'0'+(i+1);
                            var ItemIDofChild = MenuID+'0'+(i+1)+'-'+0+(ii+1);

                            var FormIDofParent = ($(this).parent().prev().data('formid'))?$(this).parent().prev().data('formid'):'';
                            var FormIDofChild = ($(this).data('formid'))?$(this).data('formid'):'';

                            // Icon:
                            var IconofParent = ($(this).parent().prev().prev().attr('class'))?$(this).parent().prev().prev().attr('class').trim():'';
                            var IconofChild = ($(this).attr('[class="fa"]'))?$(this).attr('class'):'';

                            // Item Parent
// Store each item into Item array
                            Item.push(MenuID);
                            Item.push(ItemIDofParent);
                            Item.push(parentOfChild);
                            Item.push(IconofParent);
                            Item.push(FormIDofParent);
                            Item.push('');
                            Item.push('N');
                            MenuItems.push(Item);

 // Convert list properties in JSON
                            jsonItemParent.ID = MenuID;
                            jsonItemParent.ItemID=ItemIDofParent;
                            jsonItemParent.ItemDesc=parentOfChild;
                            jsonItemParent.Icon=IconofParent;
                            jsonItemParent.Form=FormIDofParent;
                            jsonItemParent.Parents='';
                            jsonItemParent.Active='Y';
                            jsonMenuItems.push(jsonItemParent);


                            // Item Child
// Same as list parent above, this is for list child
                            Item.push(MenuID);
                            Item.push(ItemIDofChild);
                            Item.push(child);
                            Item.push(IconofChild);
                            Item.push(FormIDofChild);
                            Item.push(ItemIDofParent);
                            Item.push('Y');
                            MenuItems.push(Item);

                            jsonItemChild.ID = MenuID;
                            jsonItemChild.ItemID=ItemIDofChild;
                            jsonItemChild.ItemDesc=child;
                            jsonItemChild.Icon=IconofChild;
                            jsonItemChild.Form=FormIDofChild;
                            jsonItemChild.Parents=ItemIDofParent;
                            jsonItemChild.Active='Y';
                            jsonMenuItems.push(jsonItemChild);               
                        })
                    }else{
                        /*
                            Perform action if a list has no child
                        */
                    }

                });
                console.log(jsonItemParent);
                console.log(jsonItemChild);
                console.log(jsonMenuItems);
                console.log(MenuItems);
            });
        })
        </script>
    </body>
    </html>

jsonMenuItems = [    {"ID"      :"1",
                    "ItemID"    :"101",
                    "ItemDesc"  :"m1",
                    "Icon"      :"fa fa-image",
                    "Form"      :'',
                    "Parents"   :'',
                    "Active"    :'Y'},
                    {"ID"        :"1",
                    "ItemID"    :"101-01",
                    "ItemDesc"  :"Account (ACC:ACC01)",
                    "Icon"      :"",
                    "Form"      :'ACC:ACC01',
                    "Parents"   :'101',
                    "Active"    :'Y'},
                    {"ID"      :"1",
                   "ItemID"    :"102",
                   "ItemDesc"  :"m2",
                   "Icon"      :"fa fa-image",
                   "Form"      :'',
                   "Parents"   :'',
                   "Active"    :'Y'},
                   {"ID"        :"1",
                   "ItemID"    :"102-01",
                   "ItemDesc"  :"Account Detail Listing (ACC:ACC05)",
                   "Icon"      :"",
                   "Form"      :'ACC:ACC05',
                   "Parents"   :'102',
                   "Active"    :'Y'},
                ];
我使用
jsonItemChild.ID=MenuID将这个数组转换成JSON Obj
并将此JSON推入JSON父级
jsonMenuItems.push（jsonItemChild）。然而，JSON
jsonMenuItems
的结果只存储最后一个列表项（m2）及其子项

我希望它的商店是这样的：


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Menu</title>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <button class="btn btn-success" type="submit" id="Save">Save</button>
        <ol class="example">
            <li>
                <i class="fa fa-image" data-toggle="popover"></i>
                <span contenteditable="true" onclick="this.focus();"> m1</span>
                <ol class="">
                    <li data-formid="ACC:ACC01" data-formdesc="Account" contenteditable="true" onclick="this.focus();" class="">Account (ACC:ACC01)<i class="fa fa-angle-double-right fa-2x move_right"></i></li>
                </ol>
            </li>
            <li>
                <i class="fa fa-image" data-toggle="popover"></i>
                <span contenteditable="true" onclick="this.focus();"> m2</span>
                <ol class="">
                    <li data-formid="ACC:ACC05" data-formdesc="Account Details Listing" contenteditable="true" onclick="this.focus();" class="">Account Details Listing (ACC:ACC05)<i class="fa fa-angle-double-right fa-2x move_right"></i></li>
                </ol>
            </li>
        </ol>
        <script>
        $(document).ready(function(){
            $("#Save").click(function() {
                MenuID = '1';
                var Item = [];
                var MenuItems = []; // used to store list item into an array
                var jsonItemParent = {}; // used to store parent list in JSON Object
                var jsonItemChild = {}; // used to store child list in JOSON Object
                var jsonMenuItems = []; // used to store Object of JSON parent list and cild list
                var li = $('ol.example:last > li').length;

                $('ol.example:last > li').each(function(i,e){
                    if($(this).children('ol').children('li').length >= 1){
                        $(this).children('ol').children('li').each(function(ii,ee){

                            var parentOfChild = $(this).parent().prev().text().trim();
                            var child = $(this).text().trim();
                            var ItemIDofParent = MenuID+'0'+(i+1);
                            var ItemIDofChild = MenuID+'0'+(i+1)+'-'+0+(ii+1);

                            var FormIDofParent = ($(this).parent().prev().data('formid'))?$(this).parent().prev().data('formid'):'';
                            var FormIDofChild = ($(this).data('formid'))?$(this).data('formid'):'';

                            // Icon:
                            var IconofParent = ($(this).parent().prev().prev().attr('class'))?$(this).parent().prev().prev().attr('class').trim():'';
                            var IconofChild = ($(this).attr('[class="fa"]'))?$(this).attr('class'):'';

                            // Item Parent
// Store each item into Item array
                            Item.push(MenuID);
                            Item.push(ItemIDofParent);
                            Item.push(parentOfChild);
                            Item.push(IconofParent);
                            Item.push(FormIDofParent);
                            Item.push('');
                            Item.push('N');
                            MenuItems.push(Item);

 // Convert list properties in JSON
                            jsonItemParent.ID = MenuID;
                            jsonItemParent.ItemID=ItemIDofParent;
                            jsonItemParent.ItemDesc=parentOfChild;
                            jsonItemParent.Icon=IconofParent;
                            jsonItemParent.Form=FormIDofParent;
                            jsonItemParent.Parents='';
                            jsonItemParent.Active='Y';
                            jsonMenuItems.push(jsonItemParent);


                            // Item Child
// Same as list parent above, this is for list child
                            Item.push(MenuID);
                            Item.push(ItemIDofChild);
                            Item.push(child);
                            Item.push(IconofChild);
                            Item.push(FormIDofChild);
                            Item.push(ItemIDofParent);
                            Item.push('Y');
                            MenuItems.push(Item);

                            jsonItemChild.ID = MenuID;
                            jsonItemChild.ItemID=ItemIDofChild;
                            jsonItemChild.ItemDesc=child;
                            jsonItemChild.Icon=IconofChild;
                            jsonItemChild.Form=FormIDofChild;
                            jsonItemChild.Parents=ItemIDofParent;
                            jsonItemChild.Active='Y';
                            jsonMenuItems.push(jsonItemChild);               
                        })
                    }else{
                        /*
                            Perform action if a list has no child
                        */
                    }

                });
                console.log(jsonItemParent);
                console.log(jsonItemChild);
                console.log(jsonMenuItems);
                console.log(MenuItems);
            });
        })
        </script>
    </body>
    </html>



jsonMenuItems = [    {"ID"      :"1",
                    "ItemID"    :"101",
                    "ItemDesc"  :"m1",
                    "Icon"      :"fa fa-image",
                    "Form"      :'',
                    "Parents"   :'',
                    "Active"    :'Y'},
                    {"ID"        :"1",
                    "ItemID"    :"101-01",
                    "ItemDesc"  :"Account (ACC:ACC01)",
                    "Icon"      :"",
                    "Form"      :'ACC:ACC01',
                    "Parents"   :'101',
                    "Active"    :'Y'},
                    {"ID"      :"1",
                   "ItemID"    :"102",
                   "ItemDesc"  :"m2",
                   "Icon"      :"fa fa-image",
                   "Form"      :'',
                   "Parents"   :'',
                   "Active"    :'Y'},
                   {"ID"        :"1",
                   "ItemID"    :"102-01",
                   "ItemDesc"  :"Account Detail Listing (ACC:ACC05)",
                   "Icon"      :"",
                   "Form"      :'ACC:ACC05',
                   "Parents"   :'102',
                   "Active"    :'Y'},
                ];



我怎样才能达到上述效果？请在这里的jsfiddle（）中详细测试它。谢谢。
在多次将同一对象添加到数组中时，您正在对该对象进行反复变异：进行此操作时，请注意这些数组元素都引用同一对象，因此在再次添加之前对该对象所做的任何更改都将立即影响其他数组元素所引用的对象

因此，请确保在初始化其属性之前创建一个新对象。更改此项：


jsonItemParent.ID = MenuID;
// ...
jsonMenuItems.push(jsonItemParent);


为此：


jsonItemParent = {}; // *******
jsonItemParent.ID = MenuID;
// ...
jsonMenuItems.push(jsonItemParent);


对另一个对象
jsonimchild
也应该这样做


修复。
糟糕的是，我忘了这一点，我想到了用新数据覆盖旧数据的方法。除了创建一个新的JsonMenuItem分支（JsonMenuItem2，JsonMenuItem3…）之外，我没有其他想法，如果我有10个以上的分支，这是不可能的。不管怎样，非常感谢你伟大的回答，你救了我。加油！！：）术语说明：JSON是javascript对象的字符串表示形式，用于通过网络传输数据。您在这里根本没有使用任何JSON，您只是在使用一个普通的旧javascript对象。@DanielBeck，我在这里使用的是JSON的一种格式。由于我的脚本没有与服务器通信，我只想简化我的问题。实际上，上面的脚本是以JSON格式生成的，并在发送回客户端之前发送到服务器进行进一步处理。如果我把它全部贴出来，我需要解释的就更多了，其他人也很难理解。