使用 angularjs 获取 json url 链接（Youtube）以显示答案

【问题标题】：Getting json url links (Youtube) to show using angularjs使用 angularjs 获取 json url 链接（Youtube）以显示
【发布时间】：2017-05-03 21:15:59
【问题描述】：

我正在尝试使用 AngularJS 从包含视频对象的 json 文件中获取数据。但是，我只能根据其他资源/参考来弄清楚如何获取一个特定的 url 并使用 $sce 将其连接到 http://youtube.com/embed/ 链接。我希望能够将多个视频的链接存储在一个 json 文件中，并能够获取这些链接并将它们插入到下面提供的文本中。我希望能够在底部代码集的 $scope.video = ... 中插入一些东西，但我不知道该放什么。

我知道我需要发出一个 $http 请求，类似于这样才能获取数据：

myApp.controller('mainController', ["$scope", "$http", function($scope, $http) {

    $http.get('json/data.json').then(function(resource) {
      $scope.videoList = resource.items;
    });

json/data.json 看起来像这样：

{
  "items": [{
    "id": 1,
    "name": "Fall Afresh",
    "url": "8VdXLM8H-xU",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 2,
    "name": "Furious",
    "url": "bhBs1_iCF5A",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 3,
    "name": "God of the Redeemed",
    "url": "m1n_8MUHZ0Q",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 4,
    "name": "Be Enthroned",
    "url": "98cNpM-yh-I",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }, {
    "id": 5,
    "name": "This is Amazing Grace",
    "url": "Bn5zk3yCRr0",
    "width": 420,
    "height": 315,
    "type": "video",
    "provider_name": "http://youtube.com/"
  }]
}

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
  $scope.video = 'H_TnSwrNeWY';
});

myApp.directive('angularYoutube', function($sce) {
  return {
    restrict: 'E',
    scope: {
      video: '='
    },
    replace: true,
    template: '<div style="height:300px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="1" allowfullscreen></iframe></div>',
    link: function(scope) {
      console.log('here');
      scope.$watch('video', function(newVal) {
        if (newVal) {
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
        }
      });
    }
  }
});

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">

<head>
  <title>Display JSON Data using AngularJS</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">

  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

  <!-- load angular via CDN -->
  <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>

  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">JSON Data with AngularJS</a>
        </div>
      </div>
    </nav>
  </header>

  <div class="container">

    <div ng-controller="mainController">
      <angular-youtube video="video">
      </angular-youtube>
    </div>

  </div>

</body>

</html>

【问题讨论】：

标签： html angularjs json youtube angularjs-http

【解决方案1】：

显示的代码中有几个问题。

在 iframe 上使用ng-src 以防止在 url 不可用时出现错误请求

要访问 $http resource 对象中的数据，您需要首先访问 data 属性

$scope.videoList = resource.data.items;

作为起点，您可以通过以下方式设置第一个视频：

$scope.video = resource.data.items[0].url; // or $scope.videoList[0].url

Working demo

【讨论】：

非常感谢！你给我的帮助我弄清楚如何循环遍历数组来获取所有视频。我在 HTML 中使用 ng-repeat 创建了一个 div 来获取所有 data.item url。

【解决方案2】：

第一个代码sn-p是错误的：

myApp.controller('mainController', ["$scope", "$http", function($scope, $http) {

    $http.get('json/data.json').then(function(resource) {
      //ERRONEOUS
      //$scope.videoList = resource.items;
      //USE INSTEAD
      $scope.videolist = resource.data.items;
    });

http 承诺返回一个响应对象：

$http(...).
  then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  }, function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

欲了解更多信息，请参阅AngularJS $http Service API Reference -- General Usage

【讨论】：

【解决方案3】：

我现在解决了如何通过对象的 JSON 数组重复以在 HTML 中使用它来显示所有视频：

<div ng-controller="mainController">
  <div ng-repeat="x in videoList">
    <angular-youtube video="x.url">
    </angular-youtube>
  </div>
</div>

这让我可以抓取 $scope.videoList 所在的数据，并从每个数据中提取 url 以显示。

【讨论】：