AngularJS，如何显示接收到的 JSON 对象的内容答案

【问题标题】：AngularJS, how to display contents of a received JSON objectAngularJS，如何显示接收到的 JSON 对象的内容
【发布时间】：2020-03-18 19:01:29
【问题描述】：

我已成功从 API 接收到 JSON 对象，这从 console.log 代码中可以看出。现在，我想显示该 JSON 文件中的各种元素。例如，JSON 包含像“name”和“url”这样的元素。单击提交按钮并获取 JSON 文件后，如何在 h1 HTML 元素中单独显示这些内容。我是新手，如果这是一个明显的问题，我很抱歉，我有点卡住了，需要帮助。提前谢谢！

我的 HTML 代码是：

<body ng-app="myApp">
    <div ng-controller="UserCtrl">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="formData.searchText"/> <br/><br/>

        <button ng-click="getByID()">Submit</button>
        {{response.data.name}}
</body>

JS 是：

var myApp = angular.module('myApp', []);
myApp.controller('UserCtrl', function($scope, $http) {
     var id = "my secret key comes here";
     $scope.formData = {};
     $scope.searchText;

     $scope.getByID = function() {
        $http.get("https://rest.bandsintown.com/artists/" + $scope.formData.searchText + "?app_id="+id)
        .then(response => {
            console.log(response.data.name)
        })   
     }
});

非常感谢您！

【问题讨论】：

这在控制台打印什么？ console.log(response.data)
stackoverflow.com/questions/59926579/…

标签： html json angularjs

【解决方案1】：

您需要使用一个变量来为它分配响应数据，然后在 html 中使用它。例如显示来自response.data.name的名称：

<body ng-app="myApp">
    <div ng-controller="UserCtrl as vm">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="vm.searchText"/> <br/><br/>

        <button ng-click="vm.getByID()">Submit</button>

        <h1>{{ vm.name }}</h1>
</body>

在控制器中：

var myApp = angular.module('myApp', []);
myApp.controller('UserCtrl', function($http) {

     let vm = this;

     var id = "my secret key comes here";

     vm.searchText;
     vm.name;

     vm.getByID = function() {
        $http.get("https://rest.bandsintown.com/artists/" + vm.searchText + "?app_id="+id)
        .then(response => {
            console.log(response.data.name);
            vm.name = response.data.name;
        })   
     }
});

【讨论】：

【解决方案2】：

把数据放到$scope上：

$scope.getByID = function() {
    var url = "https://rest.bandsintown.com/artists/" + $scope.formData.searchText;
    var params = { app_id: id };
    var config = { params: params };
    $http.get(url, config)
    .then(response => {
        console.log(response.data.name)
        $scope.data = response.data;
    })   
}

然后使用ng-repeat 指令：

<body ng-app="myApp">
    <div ng-controller="UserCtrl">
        Search : <input type="text" placeholder="Search Employees"
                        ng-model="formData.searchText"/> <br/><br/>

        <button ng-click="getByID()">Submit</button>
        {{data.name}}<br>
        <div ng-repeat="(key, value) in data">
           {{key}}: {{value}}
        </div>
    </div>
</body>

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference

【讨论】：