AngularJS, как отобразить содержимое полученного JSON объекта - PullRequest
Новая
       1

AngularJS, как отобразить содержимое полученного JSON объекта

0 голосов
/ 18 марта 2020

Я успешно получил объект JSON от API, что видно из кода console.log. Теперь я хочу отобразить различные элементы в этом файле JSON. Например, JSON содержит такие элементы, как «имя» и «URL». Как отобразить их по отдельности, в элементе h1 HTML, после нажатия кнопки отправки и извлечения файла JSON. Я новичок ie и извините, если это очевидный вопрос, я застрял и мне нужна помощь. Заранее спасибо!

Мой 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)
        })   
     }
});

Заранее большое спасибо!

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Поместите данные в $ 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>

Для получения дополнительной информации см.

1 голос
/ 18 марта 2020

Вам необходимо использовать переменную, чтобы присвоить ее данным ответа, а затем использовать ее в 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;
        })   
     }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...