javascript - 使用 jquery 创建 json 数据时同样的关键问题

Question

我正在尝试使用 JSON stringfy 将 HTML 元素转换为 JSON 对象。

但它不会转换具有相同数据属性的元素。

我想data[]用来定义对象数组。

我怎么能做到这一点？

如果您运行代码片段，您将看到没有第 1 页。

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);
  $('#menuinput').val(jsondata);
  console.log(jsondata);

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<ol class="dragger_1 dragger-menu vertical">
  <li class="list-group-item" data-menu="page" data-menu-id="1">Ana Sayfa<span class="text-danger float-right menu-rem"><i class="fa fa-minus"></i></span></li>
  <li class="list-group-item" data-menu="page" data-menu-id="25">Contact Us<span class="text-danger float-right menu-rem"><i class="fa fa-minus"></i></span></li>
</ol>
<ol class="dragger_2 dragger-menu vertical">
  <li class="list-group-item" data-menu="page" data-menu-id="28">Ahmet Deneme</li>
</ol>

我想要一个如下的 JSON 数据输出；

{
  "menu": [
    {
      "data": [
        {
          "page": {
            "id": "1"
          }
        },
        {
          "page": {
            "id": "25"
          }
        }
      ]
    },
    {
      "data": [
        {
          "page": {
            "id": "28"
          }
        }
      ]
    }
  ]
}

标签： javascriptjqueryjson

Answer 1

未添加第 1 页的原因是因为它被后续页面替换。您需要data为各个菜单添加 as 数组。

var allmenus = $('.dragger-menu').map(function () {
   var li = {
      data: []
   };

   $(this).children('li').each(function () {
      var item = {};

      switch ($(this).data("menu")) {
         case "page":
            item.page = {
               id: $(this).data("menu-id")
            };
            break;
         case "external-link":
            item["external-link"] = {
               title: $(this).text().trim(),
               url: $(this).data("menu-link"),
               icon: $(this).children("i").attr("class")
            }
            break;
         case "dropdown":
            item.dropdown = {};
            item.dropdown.title = $(this).contents().filter(function () {
               return this.nodeType == Node.TEXT_NODE;
            }).text().trim();
            item.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;
      };

      li.data.push(item);
   });
   return li;
}).get();

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

<ol class="dragger_1 dragger-menu vertical">
  <li class="list-group-item" data-menu="page" data-menu-id="1">Ana Sayfa<span class="text-danger float-right menu-rem"><i class="fa fa-minus"></i></span></li>
  <li class="list-group-item" data-menu="page" data-menu-id="25">Contact Us<span class="text-danger float-right menu-rem"><i class="fa fa-minus"></i></span></li>
</ol>

<ol class="dragger_2 dragger-menu vertical">
  <li class="list-group-item" data-menu="page" data-menu-id="28">Ahmet Deneme</li>
</ol>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>