使用Underscore.js在AngularJS中实现JSON数据分组的技术求助

我来帮你搞定这个分组需求！结合你的JSON数据结构，一步步拆解实现方式：

准备工作 #

先确保项目里已经引入了AngularJS和Underscore.js的本地脚本文件，直接引入本地资源即可。

单层分组示例（比如按建筑分组） #

假设你的完整数据是类似给出的数组，我们可以在AngularJS控制器里用Underscore的_.groupBy快速完成单层分组：

控制器代码 #

angular.module('myApp', [])
  .controller('GroupingCtrl', function($scope) {
    // 你的原始JSON数据（补全示例数据方便演示）
    $scope.data = [
      { "Building*": "Building A", "Wing*": "Wing C", "Floor*": "Floor 3", "Room Name*": "Room 3", "Room Type*": "AC", "Location*": "Location 1", "Device ID*": 27, "Category*": "Soap Hygene", "Dispenser Name*": "Dispenser 34", "Type*": "Manual", "Cartridge Type*": "Type 1", "Date of installation": "2016-04-11T06:06:22 -06:-30", "Contact Last Name": "Maynard", "Email Address": "thomas.boscher@gmail.com" },
      { "Building*": "Building A", "Wing*": "Wing A", "Floor*": "Floor 1", "Room Name*": "Room 1", "Room Type*": "Non-AC", "Location*": "Location 2", "Device ID*": 28, "Category*": "Soap Hygene", "Dispenser Name*": "Dispenser 12", "Type*": "Automatic", "Cartridge Type*": "Type 2", "Date of installation": "2016-05-15T08:10:00 -06:-30", "Contact Last Name": "Smith", "Email Address": "john.smith@gmail.com" },
      { "Building*": "Building B", "Wing*": "Wing B", "Floor*": "Floor 2", "Room Name*": "Room 5", "Room Type*": "AC", "Location*": "Location 3", "Device ID*": 29, "Category*": "Hand Sanitizer", "Dispenser Name*": "Dispenser 45", "Type*": "Manual", "Cartridge Type*": "Type 1", "Date of installation": "2016-06-20T09:05:15 -06:-30", "Contact Last Name": "Doe", "Email Address": "jane.doe@gmail.com" }
    ];

    // 按「Building*」字段分组，两种写法都可行
    $scope.groupedByBuilding = _.groupBy($scope.data, function(item) {
      return item["Building*"];
    });
    // 简化写法：直接传属性名字符串（Underscore支持带特殊字符的属性名）
    // $scope.groupedByBuilding = _.groupBy($scope.data, "Building*");
  });

前端展示代码 #

<div ng-app="myApp" ng-controller="GroupingCtrl">
  <h3>按建筑分组结果</h3>
  <div ng-repeat="(buildingName, buildingItems) in groupedByBuilding">
    <h4>{{ buildingName }}</h4>
    <ul>
      <li ng-repeat="item in buildingItems">
        {{ item["Wing*"] }} - {{ item["Floor*"] }} - {{ item["Room Name*"] }} | 设备ID: {{ item["Device ID*"] }}
      </li>
    </ul>
  </div>
</div>

多层分组示例（建筑→翼楼→楼层） #

如果需要按多层维度嵌套分组，比如先按建筑，再按翼楼，最后按楼层，可以用Underscore的链式调用实现：

控制器代码 #

// 多层嵌套分组：建筑 → 翼楼 → 楼层
$scope.groupedByBuildingWingFloor = _.chain($scope.data)
  .groupBy(item => item["Building*"])
  .mapObject(buildingItems => _.groupBy(buildingItems, item => item["Wing*"]))
  .mapObject(wingGroups => _.mapObject(wingGroups, wingItems => _.groupBy(wingItems, item => item["Floor*"])))
  .value();

前端展示代码 #

<h3>建筑→翼楼→楼层多层分组结果</h3>
<div ng-repeat="(building, wingGroups) in groupedByBuildingWingFloor">
  <h4>{{ building }}</h4>
  <div ng-repeat="(wing, floorGroups) in wingGroups">
    <h5>{{ wing }}</h5>
    <div ng-repeat="(floor, roomItems) in floorGroups">
      <h6>{{ floor }}</h6>
      <ul>
        <li ng-repeat="room in roomItems">
          {{ room["Room Name*"] }} ({{ room["Room Type*"] }}) | 分配器: {{ room["Dispenser Name*"] }}
        </li>
      </ul>
    </div>
  </div>
</div>

关键注意事项 #

• 因为你的字段名带*特殊字符，访问属性时必须用方括号语法item["Building*"]，不能用点语法item.Building*（点语法不支持带特殊字符的属性名）。
• _.groupBy方法灵活性很高，替换参数就能按任意字段分组，比如按Category*分组只需把参数改成"Category*"。
• 链式调用_.chain()让嵌套分组代码更简洁易读，最后用.value()获取最终结果。

内容的提问来源于stack exchange，提问作者B.V.S Bharat Kumar