Iterate over JSON in View

Question

I'm learning to use the MEAN full-stack, and got stuck with a problem I can not find a solution for.

Iterating over the JSON object works perfectly fine using ng-repeat, but using the x.url variable in the third column just won't work at all. The URL is printed correctly in the second column.

How would I reference to the x.url variable in the iframe?

Thank you.

<div class="jumbotron text-center">
    <table class='table table-bordered'>
        <caption>LIST OF ALL SONGS</caption>
        <thead>{{ tagline }}</thead>
        <tr ng-repeat="x in songs">
            <td>{{x.name}}</td> 
            <td>{{x.url}}</td>
            <td><iframe width="560" height="315" src={{x.url}} frameborder="0" allowfullscreen></iframe></td>
        </tr>
    </table> 
</div>

I think you simply need to wrap it in a string. src="{{x.url}}" — mattklamp, Mar 01 '15 at 14:34
Unfortunately not. Inspecting the element in Chrome gives the following error "Error: [$interpolate:interr] http://errors.angularjs.org/1.3.14/$interpolate/interr?p0=%7B%7Bx.url%7D%7D…ecurl%3Fp0%3Dhttps%253A%252F%252Fwww.youtube.com%252Fembed%252FBL-3QvC6bq4 at Error (native)" — oalsing, Mar 01 '15 at 14:37
wrapping it in quotes it's not a problem, the problem is that you didn't even bothered to open dev tools to see what's the problem, you can't interpolate insecure content in this case, you have to use `$sce` to trust the url — maurycy, Mar 01 '15 at 14:38
possible duplicate http://stackoverflow.com/questions/20045150/angular-js-how-to-set-an-iframe-src-attribute-from-a-variable — squiroid, Mar 01 '15 at 15:11

score 2 · Accepted Answer · answered Mar 01 '15 at 15:00

Most of the bindings uses $sce to sanitize elements and safe you from potentially insecure content, if you trust the URL you can use $sce to explicity trust it

http://plnkr.co/edit/hJw5JWsteFBfiHH5d3QS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.tagline = "test"
  $scope.songs = [{url: $sce.trustAsResourceUrl('http://angularjs.org'), name: 'test'}];
});

You can also disable $sce completely if you trust the content, but anything that comes from user should be treated as unsafe

Iterate over JSON in View

1 Answers1