Reading external url from json file using angular js

Question

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?

https://docs.angularjs.org/error/$sce/insecurl?p0=http:%2F%2Fwww.w3schools.com%2Fhtml%2Fmov_bbb.mp4 — Amit Kumar Ghosh, Mar 22 '16 at 09:42

score 1 · Accepted Answer · edited May 23 '17 at 11:59

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

  }]);

edited May 23 '17 at 11:59

Community

1
1

answered Mar 22 '16 at 09:42

kmhigashioka

521
5
14

This is exactly what I want. Thanks! – Mar 22 '16 at 11:14

Amit Kumar Ghosh · Answer 2 · 2016-03-22T10:10:27.697

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/

well the parsing actually works, but angular is blocking loading content from an insecure url for — Amit Kumar Ghosh, Mar 22 '16 at 09:58

Reading external url from json file using angular js

2 Answers2