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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.