json字符串化重复键

Question

我有一个将Html元素转换为JSON数据的代码。但是它不会读取具有相同数据键的所有元素。如果运行代码，则会看到它已接收到元素26，但尚未接收到元素24（在线寄存器）。我认为原因是重复键错误。我希望代码能完成所有工作。我该怎么办？

var allmenus = $('.dragger-menu').map(function() {
  var li = {};
  $(this).children('li').each(function() {
    switch ($(this).data("menu")) {
      case "page":
        li.page = {
          id: $(this).data("menu-id")
        };
        break;
      case "external-link":
        li["external-link"] = {
          title: $(this).text().trim(),
          url: $(this).data("menu-link"),
          icon: $(this).children("i").attr("class")
        }
        break;
      case "dropdown":
        li.dropdown = {};
        li.dropdown.title = $(this).contents().filter(function() {
          return this.nodeType == Node.TEXT_NODE;
        }).text().trim();
        li.dropdown.data = $(this).children("ol").map(function() {
          var data = {};
          $(this).children("li").each(function() {
            switch ($(this).data("menu")) {
              case "page":
                data.page = {
                  id: $(this).data("menu-id")
                };
                break;
              case "external-link":
                data["external-link"] = {
                  title: $(this).text().trim(),
                  url: $(this).data("menu-link"),
                  icon: $(this).children("i").attr("class")
                }
                break;
            }
          });
          return data;
        }).get();
        break;
    }
  });
  return li;
}).get();

var obj = {
  menu: allmenus
};
var jsondata = JSON.stringify(obj, null, 2);
console.log(jsondata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="dragger-menu">
   <li class="list-group-item" data-menu="page" data-menu-id="24">Online Register</li>
   <li class="list-group-item" data-menu="page" data-menu-id="26">Secondly Page</li>
   <li class="list-group-item" data-menu="dropdown">
      <i class="fa fa-caret-square-o-down"></i> Dropdown Menu 
      <ol class="">
         <li class="list-group-item" data-menu="page" data-menu-id="25">Contact Us</li>
         <li class="list-group-item" data-menu="external-link" data-menu-link="https://twitter.com/your-page"><i class="fa fa-Twitter"></i> Twitter</li>
         <li class="list-group-item" data-menu="external-link" data-menu-link="https://facebook.com/your-page"><i class="fa fa-Facebook"></i> Facebook</li>
      </ol>
   </li>
</ol>
<ol class="dragger-menu">
   <li class="list-group-item" data-menu="page" data-menu-id="28">Ahmet Deneme</li>
   <li class="list-group-item" data-menu="page" data-menu-id="21">Secondly Page</li>
</ol>

Answer 1

将父对象更改为具有用于子元素元素的数组，并将push()更改为这些数组，而不是像您当前所做的那样覆盖整个属性

以下内容可能不是100％，但可以帮助您入门

var allmenus = $('.dragger-menu').map(function() {
  // arrays in parent for each group type
  var li = {page:[], "external-link":[], dropdown: []};

  $(this).children('li').each(function() {
    switch ($(this).data("menu")) {
      case "page": 
         // new page object instead of overwriting li.page 
         var page = {
          id: $(this).data("menu-id")
        };
        // push to array
        li.page.push(page)
        break;
      case "external-link":
        // new link object
        var link  = {
          title: $(this).text().trim(),
          url: $(this).data("menu-link"),
          icon: $(this).children("i").attr("class")
        }
        // push to array
        li["external-link"].push(link)
        break;
      case "dropdown":
        var dropdown = {};
        dropdown.title = $(this).contents().filter(function() {
          return this.nodeType == Node.TEXT_NODE;
        }).text().trim();
       dropdown.data = $(this).children("ol").map(function() {
          var data = {page:[],"external-link":[]};
          $(this).children("li").each(function() {
            switch ($(this).data("menu")) {
              case "page":
                data.page .push( {
                  id: $(this).data("menu-id")
                });
                break;
              case "external-link":
                data["external-link"].push( {
                  title: $(this).text().trim(),
                  url: $(this).data("menu-link"),
                  icon: $(this).children("i").attr("class")
                })
                break;
            }
          });
          return data;
        }).get();
        li.dropdown.push(dropdown)
        
        break;
    }
  });
  return li;
}).get();

var obj = {
  menu: allmenus
};
var jsondata = JSON.stringify(obj, null, 2);
console.log(jsondata);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="dragger-menu">
   <li class="list-group-item" data-menu="page" data-menu-id="24">Online Register</li>
   <li class="list-group-item" data-menu="page" data-menu-id="26">Secondly Page</li>
   <li class="list-group-item" data-menu="dropdown">
      <i class="fa fa-caret-square-o-down"></i> Dropdown Menu 
      <ol class="">
         <li class="list-group-item" data-menu="page" data-menu-id="25">Contact Us</li>
         <li class="list-group-item" data-menu="external-link" data-menu-link="https://twitter.com/your-page"><i class="fa fa-Twitter"></i> Twitter</li>
         <li class="list-group-item" data-menu="external-link" data-menu-link="https://facebook.com/your-page"><i class="fa fa-Facebook"></i> Facebook</li>
      </ol>
   </li>
</ol>
<ol class="dragger-menu">
   <li class="list-group-item" data-menu="page" data-menu-id="28">Ahmet Deneme</li>
   <li class="list-group-item" data-menu="page" data-menu-id="21">Secondly Page</li>
</ol>