Блог

Главная - Вопросы по программированию - Как отобразить данные с помощью $ http.get

Как отобразить данные с помощью $ http.get

#angularjs #json #ionic-framework

#angularjs #json #ionic-framework

Вопрос:

В моем приложении я пытаюсь извлечь массив json из базы данных с помощью $http.get , при выполнении я не могу увидеть выбранные данные в моем представлении. Но в консоли моего браузера я могу увидеть ответ, показывающий количество массивов json data:array[5] при расширении каждого массива, чтобы увидеть введенные значения в массиве. Итак, как я могу отобразить данные, полученные на моей странице просмотра.

  var brandList=[];
var successCallBack=function(response){
  $log.info(response);
  brandList=response;
};
 var errorCallBack=function(response)
 {
   $log.info(response);
 };
$http({
  method:'get',
  url:'http://local-serve:8081/route/listMake'})
  .then(successCallBack,errorCallBack);  
      return brandList;
}]);

Комментарии:

1. вы должны привязать вас brandList к какому-либо элементу (eq div )

2. Я использую http.get внутри сервиса и назначаю brandlist корневой области в контроллере, чтобы view мог иметь доступ к корневой области для json. @Michael

3. Если вы присваиваете значение, которое возвращаете после $http вызова: тогда оно всегда пустое, потому что $http выполняется асинхронно. Фактическое значение присутствует только внутри successCallBack функции

Ответ №1:

Ответ во всем объекте response. вам нужно извлечь из него значение. Попробуйте запустить этот URL в браузере. Теперь, используя тот же URL, вот пример:

В JS,

 $http.get('https://jsonplaceholder.typicode.com/photos/1')
   .then(function(response){
     $scope.title = response.data.title;
   })

И в HTML,

 <p>
 The title is <i>{{title}}</i>
</p>

Ответ №2:

Проверьте фрагмент ниже..

 function myCtrl($scope, $http) {
  $http.get('http://www.w3schools.com/angular/customers.php')
   .then(function(response){
     $scope.names = response.data.records;
   })
}  
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
    <ul>
    <li ng-repeat="x in names">{{x.Country}}</li>
  </ul>
</div>

Ответ №3:

при использовании методов $ http имейте в виду, что все они асинхронны, поэтому вы должны сделать что-то вроде этого:

 function dataService ($http, $q) {  
    return {
        getAll: getAll
    }

    function getAll () {
        var defered = $q.defer();
        var promise = defered.promise;

        $http.get('my-url')
            .success(function(data) {
                defered.resolve(data);
            })
            .error(function(err) {
                defered.reject(err)
            });

        return promise;
    }
}

Теперь вы можете обрабатывать результат по своему усмотрению:

 function myController (dataService) {  
    dataService
        .getAll()
        .then(function(data) {
            $scope.elementos = data;
        })
        .catch(function(err)) {
            //Error
        }
}