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 that you have read and understand our privacy policy and code of conduct.

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