0

How can I fetch /display external media content from URL stored in json file using angular js?

JSON

"media": [ { "title": "Example_1", "url": "http://www.w3schools.com/html/mov_bbb.mp4" }, ……. ]

Controller

controller('Controller', ['$scope','$http', function($scope, $http) { $http.get('myjson.json').success(function (data){ $scope.medianew = data.media; });

HTML

<div class="panel-body" ng-repeat = "md in medianew"> <video ng-src="{{md.url}}" width="240" controls></video> </div>

I am not able to display media from external sources. What I am doing wrong here?

Improve this question
3
  • 1
    Did you console.log(data)? Commented Mar 22, 2016 at 6:55
  • Getting Error: $interpolate:interr Interpolation Error Commented Mar 22, 2016 at 7:00
  • docs.angularjs.org/error/$sce/… Commented Mar 22, 2016 at 9:42

2 Answers 2

Reset to default
1

Your problem is somewhat similar to this one.

You need to use $sce service from angular. I made a plnkr to solve your problem. 

.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) { $http.get('myjson.json').success(function (data){ $scope.medianew = data.media.map(function (m) { m.url = $sce.trustAsResourceUrl(m.url); return m; }); }]);
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is exactly what I want. Thanks!
0

Basically you'll need to parse the content of the json file as json content.

var myApp = angular.module('myApp',[]); function MyCtrl($scope, $http) { // parse the string content as json $scope.mediaNew = JSON.parse('[{"title":"Example_1","url":"http://www.w3schools.com/html/mov_bbb.mp4"}]'); $scope.trustSrc = function(src) { // trust an insecure url return $sce.trustAsResourceUrl(src); }; } <div ng-controller="MyCtrl"> <div class="panel-body" ng-repeat = "md in mediaNew"> <h1> {{md.title}} </h1> <video ng-src="{{ trustSrc(md.url) }}" width="240" controls></video> </div> </div>

Working demo - https://jsfiddle.net/aghosh08/c2d8pwr7/

Improve this answer

1 Comment

well the parsing actually works, but angular is blocking loading content from an insecure url for