JSON-URL-Links (Youtube) mit angularjs anzeigen

Ich versuche AngularJS zu verwenden, um Daten aus einer JSON-Datei mit Videoobjekten abzurufen. Allerdings kann ich nur anhand anderer Ressourcen/Referenzen herausfinden, wie man eine bestimmte URL verwendet und sie mit $ sce an die http://youtube.com/embed/-Verknüpfung kettet. Ich möchte in der Lage sein, Links zu mehreren Videos in einer JSON-Datei zu speichern und in der Lage zu sein, diese Links zu erhalten und in den unten angegebenen Text einzufügen. Ich möchte etwas in den $ scope.video = ... des unteren Codesatzes einfügen können, aber ich kann nicht herausfinden, was ich dort platzieren soll.JSON-URL-Links (Youtube) mit angularjs anzeigen

Ich weiß, ich brauche eine $ HTTP-Anfrage, etwas ähnliches wie dies zu machen, um die Daten zu erhalten:

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

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

json/data.json wie folgt aussieht:

{ 
    "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>

Quelle

2016-12-18 Haleyb24

Mehrere Probleme im Code gezeigt.

Verwenden ng-src auf dem iframe schlecht Anfragen zu verhindern, wenn URL nicht verfügbar

ist

Um die Daten innerhalb des $ http resource Objekt zugreifen Sie zuerst die data Eigenschaft zugreifen müssen

$scope.videoList = resource.data.items;

Als Start zeigen Sie dann das erste Video einstellen könnte, indem Sie:

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

Working demo

Quelle

2016-12-18 20:05:50 charlietfl

Vielen Dank! Was du mir gegeben hast, half mir herauszufinden, wie man durch das Array schlingt, um alle Videos zu erfassen. Ich habe ein Div mit ng-repeat im HTML erstellt, um alle data.item-URLs zu erfassen. – Haleyb24

Der erste Codeausschnitt ist fehlerhaft:

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; 
    });

Ein http Versprechen gibt eine Antwort Objekt:

$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; 
    ... 
    });

Weitere Informationen finden Sie AngularJS $http Service API Reference -- General Usage

Quelle

2016-12-18 20:51:45 georgeawg

ich jetzt gelöst, wie man durch wiederholen das JSON-Array von Objekten, um alle Videos anzuzeigen, die dies innerhalb des HTML-Codes verwenden:

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

Das erlaubte mir, die Daten zu packen, wo $ scope.videoList befindet, und ziehen Sie die URLs von jedem angezeigt werden soll.

Quelle

2016-12-19 17:45:28 Haleyb24

JSON-URL-Links (Youtube) mit angularjs anzeigen

Antwort

Verwandte Themen