AngularJS中如何将外部HTML表格转为JSON？数据为空问题求解

先搞定当前的空数组问题 #

你现在的代码里有个关键疏漏：$('table tr')是在当前页面的DOM里查找表格，而不是你刚通过$.get获取到的my_var里的外部表格内容！这就是为什么弹出的数组是空的。

修正方案很简单，把获取到的HTML内容作为选择器的上下文，或者临时插入到DOM中再处理：

方案1：直接用jQuery上下文查找

$(document).ready(function() {
  $.get("xxxxxxx/test.html", function( my_var ) {
    // 把外部HTML转为jQuery对象，再在里面找表格行
    var $externalContent = $(my_var);
    var arrayOfArray = $externalContent.find('table tr').map(function(){
      return [ $('td', this).map(function(){
        return $(this).text().trim(); // 顺便清理单元格的多余空格
      }).get() ];
    }).get();
    console.log(arrayOfArray); // 用console.log看结构比alert友好太多
  });
});

方案2：临时插入DOM处理（适合后续和Angular结合）

$(document).ready(function() {
  $.get("xxxxxxx/test.html", function( my_var ) {
    // 创建隐藏的临时容器存放外部HTML
    var $tempContainer = $('<div>').hide().append(my_var).appendTo('body');
    var arrayOfArray = $tempContainer.find('table tr').map(function(){
      return [ $('td', this).map(function(){
        return $(this).text().trim();
      }).get() ];
    }).get();
    console.log(arrayOfArray);
    // 处理完记得删掉临时容器
    $tempContainer.remove();
  });
});

在AngularJS控制器里优雅实现转JSON #

既然你提到了AngularJS控制器，推荐用Angular内置的$http服务来做，更贴合Angular的生命周期，避免jQuery和Angular的作用域冲突：

angular.module('myApp', [])
.controller('TableController', ['$http', '$scope', function($http, $scope) {
  $http.get('xxxxxxx/test.html')
    .then(function(response) {
      // 提取外部HTML里的表格
      var $table = $(response.data).find('table');
      $scope.rawTableData = [];
      
      // 遍历行，提取单元格内容
      $table.find('tr').each(function(rowIndex, rowEl) {
        var rowData = [];
        $(rowEl).find('td').each(function(cellIndex, cellEl) {
          rowData.push($(cellEl).text().trim());
        });
        // 跳过空行
        if (rowData.length > 0) {
          $scope.rawTableData.push(rowData);
        }
      });

      // 如果要转成带表头的键值对JSON（假设第一行是表头）
      if ($scope.rawTableData.length > 0) {
        var headers = $scope.rawTableData[0];
        $scope.formattedJsonData = $scope.rawTableData.slice(1).map(function(row) {
          var rowObj = {};
          headers.forEach(function(header, idx) {
            rowObj[header] = row[idx];
          });
          return rowObj;
        });
        console.log('格式化后的JSON:', $scope.formattedJsonData);
      }
    })
    .catch(function(error) {
      console.error('加载外部HTML失败:', error);
    });
}]);

关于ng-include表格的过滤与计算 #

当然可以实现！但不建议直接操作ng-include进来的DOM，最好把表格转成Angular作用域里的数据模型，再用ng-repeat重新渲染，这样就能无缝使用Angular的过滤和计算能力：

步骤1：转成数据模型（上面的代码已经搞定）

步骤2：视图里用ng-repeat渲染并添加功能

<div ng-controller="TableController">
  <!-- 搜索过滤输入框 -->
  <input type="text" ng-model="searchKeyword" placeholder="搜索表格内容...">

  <!-- 计算示例：假设表格第二列是数字，求总和 -->
  <p>第二列总和：{{ calculateColumnTotal(1) }}</p>

  <!-- 用ng-repeat渲染过滤后的表格 -->
  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="header in rawTableData[0]">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in formattedJsonData | filter:searchKeyword">
        <td ng-repeat="(key, value) in row">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</div>

步骤3：控制器里添加计算函数

$scope.calculateColumnTotal = function(colIndex) {
  if (!$scope.formattedJsonData) return 0;
  // 先拿到表头对应的键
  var targetKey = $scope.rawTableData[0][colIndex];
  return $scope.formattedJsonData.reduce(function(total, row) {
    // 把单元格内容转成数字，空值按0处理
    return total + parseFloat(row[targetKey] || 0);
  }, 0);
};

如果非要直接操作ng-include的原始表格，需要监听$includeContentLoaded事件确保DOM加载完成，再用jQuery做过滤，但这种方式不符合Angular的MVVM思想，维护起来很麻烦，还是转成数据模型的方式更靠谱。

内容的提问来源于stack exchange，提问作者Anouar Ghali