CODEWITHSUNDEEP
angularjsjson
user4596341
user4596341

Reputation:

Reading external url from json file using angular js

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?

Upvotes: 0

Views: 1854

Answers (2)

Amit Kumar Ghosh
Amit Kumar Ghosh

Reputation: 3726

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/

Upvotes: 0

kmhigashioka
kmhigashioka

Reputation: 521

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

  }]);

Upvotes: 1

Related Questions