Getting json url links (Youtube) to show using angularjs

Question

I'm trying to use AngularJS to get data from a json file which has video objects. However, I can only figure out based on other resources/references how to take ONE specific url and concatenate it using $sce to the http://youtube.com/embed/ link. I want to be able to store links to multiple videos in a json file and be able to get those links and insert them into the text provided below. I want to be able to insert something within the $scope.video = ... of the bottom set of code, but I can't figure out what to place there.

I know I need to make an $http request, something similar to this in order to get the data:

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

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

json/data.json looks like this:

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

charlietfl · Accepted Answer · 2016-12-18 20:05:50Z

0

Several issues in code shown.

Use ng-src on the iframe to prevent bad requests when url is not available

To access the data inside the $http resource object you need to first access the data property

$scope.videoList = resource.data.items;

As a start point you could then set the first video by doing:

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

Working demo

answered Dec 18, 2016 at 20:05

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Haleyb24 Over a year ago

Thank you so much! What you gave me helped me to figure out how to loop through the array to grab all the videos. I created a div using ng-repeat in the HTML to grab all the data.item urls.

georgeawg · Accepted Answer · 2016-12-18 20:51:45Z

The first code snippet is erroneous:

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

An http promise returns a response object:

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

For more information, see AngularJS $http Service API Reference -- General Usage

Haleyb24 · Accepted Answer · 2016-12-19 17:45:28Z

0

I now solved how to repeat through the JSON array of objects to show all the videos using this within the HTML:

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

This allowed me to grab the data where $scope.videoList is located and pull the urls from each one to display.

answered Dec 19, 2016 at 17:45

Haleyb24

134 bronze badges

Collectives™ on Stack Overflow

Getting json url links (Youtube) to show using angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related