AngularJS - невозможно получить данные с сервера во время итерации ng-repeat

Question

AngularJS - невозможно получить данные с сервера во время итерации ng-repeat

0

Я создаю приложение, которое получает простой массив с видео-ссылками YouTube, а также некоторые другие данные. Я создаю несколько html элементов DOM, используя ng-repeat. На каждой итерации ретранслятора мне нужно вызвать функцию и передать текущую ссылку на YouTube. Этот вызов функции передает ссылку на бэкэнд для дальнейшего процесса и в конечном итоге возвращает объект в следующем формате:

var obj = {
    duration: "1H34M45S",
  more_data:{
    title: "some title",
    height: "200px",
    width: "100px",
    date_posted: "oct 2, 1734"
  }
}

Очевидно, что моя текущая реализация не работает (бесконечный цикл). Каков правильный способ приема и использования данных во время ng-repeat?

HTML:

<div class="row" ng-repeat="vid in videosArray">
  <div class="col-lg-12 col-md-12 col-sm-12">
    <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
    <p>{{getVideoInfo(vid.url)}}</p> <!--here I need to acces the returned object and use the data. for example place the title / duration here -->
  </div>
</div>

JS:

$scope.getVideoInfo = function(videoUrl) {
  $http({
    url: "youtubeInfo.php",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({getInfo: videoUrl})
  }).success(function(data, status, headers, config) {
    console.log(data);
    return data; //data is an object
  }).error(function(data, status, headers, config) {});
}

edit: Это ошибки, которые я получаю в консоли:

<b>Notice</b>:  Undefined offset: 1 in <b>C:\xampp\htdocs\controllers\youtubeInfo.php</b> on line <b>22</b><br />
{"duration":{"kind":"youtube#videoListResponse","etag":"\"q5k97EMVGxODeKcDgp8gnMu79wM\/Rk41fm-2TD0VG1yv0-bkUvcBi9s\"","pageInfo":{"totalResults":0,"resultsPerPage":0},"items":[]},"vid_data":null}

https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D

edit2 - даже если я изменяю функцию JS для возврата данных через $scope, я все равно получаю ошибку выше в бесконечном цикле.

}).success(function(data, status, headers, config) {
    console.log(data);
    $scope.test = data;
}).error(function(data, status, headers, config) { });

HTML:

<div class="col-lg-12">
  <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  <p>{{getVideoInfo(vid.url)}}</p><span>{{test.duration}}</span>
</div>

undroid 24 март 2016, в 14:37

Источник

0

что выводится для console.log
Hassan Tariq 24 март 2016, в 13:41

Теги:

angularjs

angularjs-ng-repeat

3 ответа

Ещё вопросы

Rob · Answer 1 · 2016-03-24T12-32-00.000Z

Я рекомендую использовать $ resource здесь, потому что он возвращает объект, который заполняется после завершения запроса и поэтому может быть легко использован в вашем шаблоне.

https://docs.angularjs.org/api/ngResource/service/ $ resource

Таким образом, вы должны в конечном итоге с sth, как это (не тестировалось):

var VideoInfo = $resource('youtubeInfo.php', null, { 'get': {method:'POST'} }); // BTW: Think about if this request needs POST as method...

$scope.getVideoInfo = function(videoUrl) {
  return VideoInfo.get({getInfo: videoUrl}, function(value, responseHeaders) {
   // Do some logging or whatever...
  });
}

В шаблоне вы должны использовать ng-init для выполнения запроса один раз, а затем использовать объект по своему усмотрению.

 <div class="row" ng-repeat="vid in videosArray" ng-init="videoInfo = getVideoInfo(vid.url)">
  <div class="col-lg-12 col-md-12 col-sm-12">
  <iframe ng-src="{{trustSrc(vid.url)}}" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  <p>{{videoInfo.title}} {{videoInfo.duration}}</p>
 </div>

asdf_enel_hak · Answer 2 · 2016-03-24T12-19-00.000Z

0

обещание не возвращает значение данных, вместо этого вы должны делать assingment в успехе

function(videoUrl) {
  $http({
    url: "youtubeInfo.php",
    method: "POST",
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({getInfo: videoUrl})
  }).success(function(data, status, headers, config) {
    console.log(data);
    $scope.getVideoInfo = data; //data is an object
  }).error(function(data, status, headers, config) {});
}

Видеть это

asdf_enel_hak 24 март 2016, в 12:19

0

Что вы подразумеваете под promise don't return data value ?
Pankaj Parkar 24 март 2016, в 13:39
0

Смотрите ссылку в обновленном ответе
asdf_enel_hak 24 март 2016, в 13:42
0

Я специально спросил вас, потому что, его совершенно неверное promise don't return data value .
Pankaj Parkar 24 март 2016, в 13:44
0

Разве это не обещание $http ?
asdf_enel_hak 24 март 2016, в 13:46
0

Ваше решение выглядит нормально, но в объяснении содержится неверная information об обещании «обещание не возвращает значение данных». По сути, это не проблема. getVideoInfo(vid.url) имеет возможность возвращать данные в соответствии с механизмом цепного обещания. К вашему сведению, проблема заключается в том, что getVideoInfo(vid.url) используемый в представлении, получит значение, даже если мы вернем его из функции getVideoInfo . почему вы должны назначить его переменной области после успешного вызова $ http
Pankaj Parkar 24 март 2016, в 13:53
0

Promise имеет возможность возвращать данные, следуя механизму цепочки обещаний, не могли бы вы дать ссылку, чтобы понять, что это означает?
asdf_enel_hak 24 март 2016, в 13:55
0

Я думаю, что это была бы отличная статья
Pankaj Parkar 24 март 2016, в 13:57
0

@PankajParkar Я обновил свой пост с вашими советами, я все еще получаю те же ошибки в бесконечном цикле.
undroid 24 март 2016, в 14:06
0

Вы не должны вызывать вызов $ http таким способом, поместив его внутри {{}} , потому что он будет вызывать этот ajax в каждом цикле digedigest + свой собственный обзор ... после завершения $ http
Pankaj Parkar 24 март 2016, в 14:09

Показать ещё 7 комментариев

Hassan Tariq · Answer 3 · 2016-03-24T11-55-00.000Z

Попробуйте использовать это

      {{getVideoInfo(vid.url).duration}}