Question

我是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>'); 
                });                      
  }
});

希望有人可以帮助我：）

Answer 1

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

＆＃13;

<!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>

＆＃13;

使用jQuery和AJAX在div层次结构中设置json结果集

1 个答案: