AngularJS结合Ajax调用Java接口返回JSON无法在HTML展示表格怎么办

核心错误点 #

• 错误使用ng-controller绑定方法：你在表格外层div上写的ng-controller="getFrames"属于语法错误，getFrames是你定义在FramesController中的请求方法，不是控制器实例，AngularJS找不到对应控制器会直接抛出异常，导致该区域所有数据绑定失效
• 未主动触发数据请求：你定义了getFrames请求方法，但没有在控制器初始化时调用，页面加载后不会主动向后端拉取数据，frameList始终为未赋值状态，ng-show判断不生效，表格自然不会渲染

具体修复步骤 #

1. 修改Frames.js代码 #

在控制器末尾添加初始化调用逻辑，让页面加载后自动拉取数据：

var app = angular.module('frames', []);

app.controller("FramesController", function ($scope, $http) {

    $scope.successGetFramesCallback = function (response) {
        $scope.frameList = response.data;
        $scope.errormessage="";
    };

    $scope.errorGetFramesCallback = function (error) {
        console.log(error);
        $scope.errormessage="Unable to get list of frames";
    };

    $scope.getFrames = function () {
        $http.get('/mcga/frames').then($scope.successGetFramesCallback, $scope.errorGetFramesCallback);
    };

    // 新增：控制器初始化时自动调用请求方法
    $scope.getFrames();
});

2. 修改frames.html代码 #

删除div上错误的ng-controller绑定，同时优化ng-show判断逻辑避免空指针报错：

<!-- 把原来的div标签替换成下面的，body已经绑定了FramesController不需要重复绑定 -->
<div ng-show="frameList && frameList.length > 0">

如果需要排查请求异常，可以在页面上添加错误提示展示：

<div style="color:red" ng-show="errormessage">{{errormessage}}</div>

可选排查验证点 #

如果修改后还是不显示，可以按以下步骤确认：

• 打开浏览器控制台，看是否有AngularJS报错、JS文件加载失败报错
• 切换到网络面板，确认/mcga/frames请求是否正常发起，返回的JSON字段是否和页面绑定的id/company/model/price/amount完全一致（注意大小写敏感）

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