anglejsを使って表示するjson url links（Youtube）を取得する

私はAngularJSを使ってビデオオブジェクトを持つjsonファイルからデータを取得しようとしています。しかし、私は他のリソース/リファレンスに基づいて特定のURLを1つ取り、$ sceを使ってhttp://youtube.com/embed/リンクに連結する方法しか見つけられません。私は、複数のビデオへのリンクをjsonファイルに保存し、それらのリンクを取得して、それらを以下のテキストに挿入できるようにしたいと考えています。私はコードの一番下の$ scope.video = ...の中に何かを挿入できるようにしたいが、そこに何を配置するのか分からない。anglejsを使って表示するjson url links（Youtube）を取得する

私がデータを取得するために、これに似たような、私は$の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>

出典

2016-12-18 Haleyb24

コード内にいくつかの問題があります。 URLは、あなたが最初にスタートしたようdataプロパティ

$scope.videoList = resource.data.items;

にアクセスする必要が$にhttp resourceオブジェクト内のデータにアクセスするには

利用できない場合、悪いの要求を防ぐためにはiframeに

使用ng-src次のようにして最初のビデオを設定することができます。

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

Working demo

出典

2016-12-18 20:05:50 charlietfl

ありがとうございました！あなたが私に与えたことは、すべてのビデオをつかむためにアレイをループする方法を理解する助けになりました。私はすべてのdata.itemのURLをつかむために、HTMLのng-repeatを使ってdivを作成しました。 – Haleyb24

最初のコードスニペットは誤りである：

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

出典

2016-12-18 20:51:45 georgeawg

を見ますJSON配列のオブジェクトを使用して、HTML内でこれを使用しているすべての動画を表示します：

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

これは私が$ scope.videoListが配置されているデータを取得し、表示するために、それぞれ1からURLを引くことができました。

出典

2016-12-19 17:45:28 Haleyb24

anglejsを使って表示するjson url links（Youtube）を取得する

答えて

関連する問題