时间戳

首页 > 解决方案 > 使用 jQuery 和 AJAX 在 div 层次结构中对 json 结果集进行分组

jquery - 使用 jQuery 和 AJAX 在 div 层次结构中对 json 结果集进行分组

问题描述

我是 ajax 和 jquery 的新手，花了几个小时试图弄清楚似乎无法在线或其他任何地方找到解决方案。

我试图弄清楚如何（部分）将我的结果集分组到所需的输出。

我来自 ajax 的 json 结果集是：

    {  
    "success":[  
        {  
            "id":8,
            "subcategory":"SubCategory 1",
            "subgroup":"Subgroup 1",
        }, 
        {  
            "id":9,
            "subcategory":"SubCategory 1",
            "subgroup":"Subgroup 2",
        }, 
        {  
            "id":10,
            "subcategory":"SubCategory 2",
            "subgroup":"Subgroup 3",
        }, 
            {  
            "id":11,
            "subcategory":"SubCategory 2",
            "subgroup":"Subgroup 4",
        }
    ]
    }

试图达到这个结果：

  <div class="profiles-wrapper">
    <div class="profile-block-wrapper">
        <div class="profile-block-title">SubCategory 1</div>
        <div class="profile-subtags-wrapper">
          <a href="" class="profile-tag">Subgroup 1</a>
          <a href="" class="profile-tag">Subgroup 2</a>
        </div>
    </div>
    <div class="profile-block-wrapper">
        <div class="profile-block-title">SubCategory 2</div>
        <div class="profile-subtags-wrapper">
          <a href="" class="profile-tag">Subgroup 3</a>
          <a href="" class="profile-tag">Subgroup 4</a>
        </div>
    </div>
  </div>

我拥有的 jquery/ajax 部分是。但是，我有点迷失从这里去哪里。

$.ajax({

  type:"POST",
  url:"{{url('insert-ajax')}}",
  data : form_data,
  success: function(data) {
                $.each(data.success, function(k, v) {  
                    $("#inserted_data").append('<div class="profile-block-wrapper" >'+v.subcategory+'</div>'); 
                });                      
  }
});

希望有人可以帮助我:)

标签： jqueryjsonajax

解决方案

假设您的 ajax 调用返回了预期的结果，您只需要为返回的元素的实际分组添加代码。在下面的代码中，该groupByCategory函数用于创建一个关联数组，其中键是子类别，值包含链接的 HTML。

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    function loadData() {
      data = {
        "success": [{
            "id": 8,
            "subcategory": "SubCategory 1",
            "subgroup": "Subgroup 1",
          },
          {
            "id": 9,
            "subcategory": "SubCategory 1",
            "subgroup": "Subgroup 2",
          },
          {
            "id": 10,
            "subcategory": "SubCategory 2",
            "subgroup": "Subgroup 3",
          },
          {
            "id": 11,
            "subcategory": "SubCategory 2",
            "subgroup": "Subgroup 4",
          }
        ]
      };
      var grouped = groupByCategory(data.success);
      for (var k in grouped) {
        $("#inserted_data").append('<div class="profile-block-wrapper" ><div class="profile-block-title">' + k + '</div><div class="profile-subtags-wrapper">' + grouped[k] + '</div></div>');
      }
    }

    function groupByCategory(data) {
      var groups = {};
      $(data).each(function(k, v) {
        if (!(v.subcategory in groups)) {
          groups[v.subcategory] = "";
        }
        groups[v.subcategory] = groups[v.subcategory] + "<a href='' class='profile-tag'>" + v.subgroup + "</a>";
      });
      return groups;
    }
    $(document).ready(loadData);
  </script>
  <div id="inserted_data" class="profiles-wrapper">
  </div>
</body>

</html>

推荐阅读