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

0

Я разрабатываю приложение с API Riot Games, но в этом примере оно выполняется с помощью API стран REST. https://restcountries.eu/rest/v1/alpha/co

Я использую стек MEAN.IO, и это мой код:

test.html

<html ng-app="lolData">
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

   <section id="center" ng-controller="summonerStats">
      <form ng-submit="search()">
        <div class="mdl-textfield mdl-js-textfield">
          <input class="mdl-textfield__input" type="text" id="summonerName" placeholder="Summoner Name">
          <label class="mdl-textfield__label" for="sample1"></label>
        </div>
        <input class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" value="Search"/>           

      <p ng-show="show">
        {{ mystats.name }}
      </p>

    </form>
   </section>   
</body> 
</html>

test.js

'use strict';

var lolData = angular.module('lolData', []);
console.log("before controller");

lolData.controller('summonerStats', function($scope, $http) {        
   var url = "https://restcountries.eu/rest/v1/alpha/co";
   console.log("inside controller");
   $scope.show = false;       
   $scope.search = function() {                                                          
    $http.get(url)
    .success(function(response) {
        $scope.mystats = response;
        $scope.show = true;
        console.log("inside success controller");
    });
};                
});

Когда я обновляю страницу, код выполняется до "до контроллера" console.log. Он не может попасть внутрь lolData.controller. И в консоли браузера отображается следующая ошибка.

Изображение 174551

И html не принимает встроенную область javascript.

Изображение 174551

Что мне не хватает?

Обновление 1:

Я добавил index.html в codepen: Index.html

И Header.html в кодеде тоже: header.html

  • 0
    Можете ли вы показать index.html, пожалуйста?
  • 0
    да, где вы подключаете angular.js?
Показать ещё 2 комментария
Теги:
rest
mean.io

2 ответа

1

Не уверен, что это ваша проблема, но $http.success (и $http.error) обесценивается с версии 1.4.4. Вместо этого используйте функции обратного вызова для успеха и ошибки

var url = "https://restcountries.eu/rest/v1/alpha/co";
$http.get(url).then(
  function successCallback(response) {
    $scope.mystats = response;
    $scope.show = true;
    console.log("inside success controller");
  }, function errorCallback(error) {
     console.log(error);
});
Поделиться
  • 0
    Лучше с вашим кодом. Я хочу что-то, что не осуждается. Но проблема сохраняется.
0

Ваш объект ответа не делает то, что вы думаете.

Из угловых документов вы видите, что ответ имеет несколько свойств, прикрепленных к возвращенному объекту.

Вы хотите

$scope.mystats = JSON.parse(response.data);

Поделиться
  • 0
    Ничего не изменилось с JSON.parse (response.data); Может быть, это потому, что API уже возвращает JSON, верно?
  • 0
    Вы сделали console.log(response) в обратном вызове?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню