SyntaxError: Unexpected token at Object.parse (native)

Question

I have this haml code in a template,

.movie_container{"ng-repeat" => "movie in movieGroup | orderBy:'release_date'"}
  %a{:href => "#", "ui-sref" => ".container-big({value: '{{movie}}'})"} More info

When a user clicks on the a ui-sref element I load a new state called home.container-big. I also pass my movie string data to the home.container-big state so I can use the data in there.

.state('home.container-big',{
  params: {
    value: null
  },
  url: '',
  views: {
    "container-big":{
      templateUrl: '../assets/angular-app/templates/_movie-info.html',
      controller: function($scope, $stateParams, $state) {
        $scope.movie = JSON.parse($stateParams.value);
        console.log ($scope.movie)
      }
    }
  }
})

In this state I have a controller. In the controller I have a scope called movies. The data string from the previous state gets converted to JSON and placed in my $scope.movies so I can use it on the _movie-info.html template,

So far, so good.

.container-info{"ng-style" => "{'background-image':'url(https://image.tmdb.org/t/p/w1280{{movie.backdrop}})'}"}

  %ul.trailers
    %li{"ng-repeat" => "trailer in filteredTrailers = (trailers | filter: { movie_id: movie.movie_id})"}
      %a{"ui-sref" => ".container-big-trailer({value: '{{ trailer.link }}' })"} {{ trailer.link }}

  .container-trailers
    %div{"ui-view" => "youtube_trailer"}

In this template I make a list of all the trailers in my db and filter them by movie_id. When a user clicks on the a ui-sref=".container-big-trailer I enter a new state called .container-big-trailer and pass the data from trailer.link as a value to that state.

And on this click I get the error

SyntaxError: Unexpected token y
  at Object.parse (native)

It looks like the token has something to do with the value of trailer.link because the token is the first token of the value of trailer.link, except for trailers that start with the letter N or F (and maybe a few more).

* EDIT *

If I remove the {value: '{{ trailer.link }}' } from the ui-sref link and then click like so,

  %ul.trailers
    %li{"ng-repeat" => "trailer in filteredTrailers = (trailers | filter: { movie_id: movie.movie_id})"}
      %a{"ui-sref" => ".container-big-trailer()"} {{ trailer.link }}

And then console.log what the value is of my .container-big-trailer state is,

.state('home.container-big.container-big-trailer',{
  params: {
    value: null
  },
  url: '',
  views: {
    "youtube_trailer":{
      templateUrl: '../assets/angular-app/templates/_container-trailer.html',
      controller: function($scope, $stateParams, $state) {
        $scope.value = $stateParams.value;
        console.log ('big-trailer' + $scope.value)
      }
    }
  }
})

It outputs the string data of the value given with state home.container-big.

Can you convert your haml code to regular HTML?

Shaohao
– Shaohao

2015-12-08 14:08:40 +00:00
Commented Dec 8, 2015 at 14:08 — Shaohao
– Shaohao, Commented Dec 8, 2015 at 14:08

Peter Boomsma · Accepted Answer · 2015-12-08 16:37:59Z

1

If anybody else runs into the same problem. The bug was that I had defined my $stateParams with the same value. I thought that value was a way to get the data, but it's just a name. I changed one value to movie_info and replaced it as well in the template and now it's working.

answered Dec 8, 2015 at 16:37

Peter Boomsma

9,87927 gold badges116 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SyntaxError: Unexpected token at Object.parse (native)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related