如何通过AngularJS从API控制台输出中获取data字段数据？

1. AngularJS 控制器代码 #

在你的AngularJS控制器中，通过$http调用API并提取响应里的data字段：

angular.module('yourAppName').controller('DataDisplayController', ['$http', function($http) {
    var vm = this;
    vm.itemDetails = null;

    // 调用API接口（替换为你实际的API路径）
    $http.get('/api/your-target-endpoint')
        .then(function(apiResponse) {
            // 直接提取响应中的data节点数据
            vm.itemDetails = apiResponse.data.data;
        })
        .catch(function(error) {
            console.log('数据请求失败:', error);
        });
}]);

2. HTML 视图代码 #

在页面中绑定控制器数据，展示data下的具体字段：

<div ng-controller="DataDisplayController as vm">
    <!-- 加载状态提示 -->
    <div ng-if="!vm.itemDetails">
        正在加载数据...
    </div>

    <!-- 数据展示区域 -->
    <div ng-if="vm.itemDetails" class="data-card">
        <h4>详情信息</h4>
        <ul>
            <li><strong>ID:</strong> {{vm.itemDetails.id}}</li>
            <li><strong>创建日期:</strong> {{vm.itemDetails.createdDate | date:'yyyy-MM-dd HH:mm'}}</li>
            <!-- 根据API返回的实际字段，添加更多展示项 -->
            <li><strong>名称:</strong> {{vm.itemDetails.name}}</li>
            <li><strong>状态:</strong> {{vm.itemDetails.status}}</li>
        </ul>
    </div>
</div>

注意事项 #

• 替换代码中的yourAppName为你实际的AngularJS模块名称
• 将/api/your-target-endpoint替换为Swagger文档中对应的API接口路径
• 视图中的字段名（如createdDate、name）必须和API返回的data对象字段完全一致，大小写敏感
• 使用date过滤器可以快速格式化日期类型字段，可根据需求调整格式字符串

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