How to make a JavaScript object value without quotes (not a string)?

Question

The Videogular Angular video player likes to have videos referenced in an object like this:

{
    preload: "auto",
    sources: [
        {
            src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"),
            type: "video/mp4"
        }
    ],
    theme: "bower_components/videogular-themes-default/videogular.css"
}

$sce.trustAsResourceUrl runs the URL through ng-sanitize to prevent malicious code.

In my controller I make this object after uploading the video to Firebase Storage, which returns a snapshot object:

var videoObject = {
    preload: "auto",
    sources: [
        {
            src: "$sce.trustAsResourceUrl(" + $scope.snapshot.downloadURL + ")",
            type: "video/" + $scope.mediaFormat
        },
    ],
    theme: {
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
    }
};

The result is:

{
    preload: "auto",
    sources: [
        {
            src: "$sce.trustAsResourceUrl(http://static.videogular.com/assets/videos/videogular.mp4)",
            type: "video/mp4"
        }
    ],
    theme: "bower_components/videogular-themes-default/videogular.css"
}

That doesn't work because the src key's value is a string, when I want a $sce.trustAsResourceUrl not to be a string.

If I make the object this way:

var videoObject = {
    preload: "auto",
    sources: [
        {src: $sce.trustAsResourceUrl +'("' + $scope.snapshot.downloadURL + '")', type: "video/" + $scope.mediaFormat}
    ],
    theme: {
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
    }
};

then I get:

{
    preload: "auto",
    sources: [
        {
            src: "function (b){return g(a,b)}(\"http://static.videogular.com/assets/videos/videogular.mp4)",
            type: "video/mp4"
        }
    ],
    theme: "bower_components/videogular-themes-default/videogular.css"
}

According to Mozilla, "A JavaScript object is a mapping between keys and values. Keys are strings (or Symbols) and values can be anything." If values can be anything, how do I make a value that is partly a string and partly not a string? What is "partly a string and partly not a string" called? A literal?

You can insert a function as value to that field, that does the logic that you want — buræquete, Mar 13 '17 at 23:21

score 0 · Answer 1 · answered Mar 13 '17 at 23:28

0

I think something like this should work,

function something() { return $sce.......; } source[0].src = something();

answered Mar 13 '17 at 23:28

Nik

11
1

Nik, that didn't work, but I can't attach a screenshot to a comment. I'll write a new answer instead of a comment. – Thomas David Kehoe Mar 14 '17 at 16:58

Damon · Answer 2 · 2017-03-13T23:40:43.753

Let's focus on the snippet that's giving you trouble:

{
    src: "$sce.trustAsResourceUrl(" + $scope.snapshot.downloadURL + ")",
    type: "video/" + $scope.mediaFormat
},

Here you are performing string concatenation

"$sce.trustAsResourceUrl(" + // type: String
$scope.snapshot.downloadURL +  // type: String
")"                            // type: String
// Result is of type: String

Similarly, in your second example, you are attempting to concatenate a function with a string which will result in the function being coerced into a string. Run the following snippet if you want a clear example of this behavior:

function hello () { return "hello" }
var result = hello + "world"
// ----------------^ this implicitly calls toString on the function
console.log("result: ", hello + "world")
console.log("result type: ", typeof result)

Solution: call the function, passing in the url as an argument:

{
    src: $sce.trustAsResourceUrl($scope.snapshot.downloadURL),
    type: "video/" + $scope.mediaFormat
},

Damon, I can't get that to work. I'll write an answer instead of a comment so that I can attach screenshots. — Thomas David Kehoe, Mar 14 '17 at 17:21

How to make a JavaScript object value without quotes (not a string)?

2 Answers2