1

Привет! У меня есть апи с доступом к task'ам, нужно отправить get запрос и полученное вывести в li. Вот запрос:

$http.get('http://localhost:3001/get1')
    .success(function (result){
        console.log('success', result);
        $scope.tasksArr = result;
    })
    .error(function (result){
        console.log('error');
});

и есть список

<li ng-repeat="task in tasksArr track by $index">
    {{task.text}}
</li>

Как правильно написать чтобы отобразилось?

6
  • А почему вы присваиваете после запроса данные свойству $scope.books вместо нужного $scope.tasksArr?
    – korytoff
    12 мар 2017 в 18:51
  • Да, забыл исправить)
    – Alexey
    12 мар 2017 в 18:57
  • Приведите также хотя бы часть результата вывода console.log('success')
    – vp_arth
    12 мар 2017 в 19:04
  • ! Object {data: Object, status: 200, config: Object, statusText: "OK"}
    – Alexey
    12 мар 2017 в 19:10
  • это вы уже на then заменили, тогда и логировать надо result.data
    – vp_arth
    12 мар 2017 в 19:12

1 ответ 1

2

Вы итерируете не тот массив(tasksArr вместо books):

<li ng-repeat="task in books track by $index">
    {{task.text}}
</li>

Также хочу отметить, что методы .success/.error являются устаревшими и их не рекомендуется использовать. Используйте .then:

$http.get('http://localhost:3001/get1')
    .then(function (response){
        console.log(response.data); // {error: null, success: Array}
        $scope.books = response.data.success;
    })
    .catch(function (response){
       console.error('error', response.status, response.data);
    });

Рабочий пример

(function(module){
  module.controller('Test', Test);
  
  Test.$inject = ['$http', '$scope'];
  
  function Test($http, $scope) {
    $http.get('http://httpbin.org/get', {params: {
      books: ['Book 1', 'Book 2', 'Book 3']
    }})
      .then(response => response.data.args.books)
      .then(books => $scope.books = books);
  }
})(angular.module('app', []));
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Test as c">
  <ul>
    <li ng-repeat="book in books">
      {{book}}
    </li>
  </ul>
</div>

9
  • К сожалению, не вывод, а только наоборот дублировалось li>task in taskArr
    – Alexey
    12 мар 2017 в 19:00
  • @Alexey, я решительно не понимаю, что вы хотите сказать
    – vp_arth
    12 мар 2017 в 19:05
  • oi66.tinypic.com/wt86mq.jpg
    – Alexey
    12 мар 2017 в 19:09
  • Попробуйте заменить {{task.text}} на просто {{task}}. Тогда вы хоть увидите, что у вас там
    – vp_arth
    12 мар 2017 в 19:10
  • Теперь в нижней li отобразился весь массив объектов, первый li не убрался
    – Alexey
    12 мар 2017 в 19:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.