json字符串化重复键

高岭土

我有一个将 Html 元素转换为 JSON 数据的代码。但它不会读取具有相同数据键的所有元素。如果您运行代码，您会看到它已收到元素 26 但尚未收到元素 24 (Online Register) 。我认为原因是重复密钥错误。我想要代码来处理这一切。我能怎么做？

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>

查理特

将父对象更改为具有子元素和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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。