Sending a JSON encoded PHP variable to JS with Laravel 4

Question

I am having some trouble passing a JSON encoded php array to javascript in Laravel 4. I am sending it to my view from my controller, populating a value field in HTML, and then pulling that value with JS. Code is below:

Controller:

$artist_likes_profile = Fanartist::profile_fan_likes(Auth::user()->get()->id);
$artist_likes = json_encode(array("name"=>$artist_likes_profile));

return View::make('artists.show', compact('artist'))
       ->with('artist_likes', $artist_likes);

HTML:

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="<? php echo $artist_likes ?>">

JS:

var artist_likes = $('#js-helper-artist-likes').val();
console.log(artist_likes);

However, running this, I only see the artist_likes variable in the console appear as "{" instead of the actual json string.

When I add these two lines (to try to decode the json variable in js):

var artist_likes_decoded = $.parseJSON(artist_likes);
console.log(artist_likes_decoded);

I get the error:

Uncaught SyntaxError: Unexpected end of input

I know the JSON string is populating the value field, because I see this in the page source:

   <input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="{"name":[{"id":215,"fbid":"19538277626","stage_name":"311","city":"","state":"","image_path":"http:\/\/graph.facebook.com\/19538277626\/picture?width=720&height=720",
"description":"311 was formed in 1990 in Omaha, Nebraska."},{"id":18,"fbid":"14591271531","stage_name":"Beck","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/14591271531\/picture?width=720&height=720",
"description":""},{"id":47,"fbid":"137029526330648","stage_name":"Disclosure","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/137029526330648\/picture?width=720&height=720","description":""},
{"id":11,"fbid":"152513780224","stage_name":"Arcade Fire","city":"","state":"","image_path":"https:\/\/graph.facebook.com\/152513780224\/picture?width=720&height=720","description":""}]}">

Any ideas what I"m doing wrong? Thank you.

you can see that the value attribute immediatly closes again value="{" — john Smith
– john Smith, Commented Aug 8, 2014 at 6:19

Zentoaku · Accepted Answer · 2014-08-08 06:30:27Z

1

It's because JSON string contains quotas (") and that breaks html parsing. You need to escape those first.

<?php echo str_replace('"', '\"', $artist_likes) ?>

Alternative solution is to pass JSON directly to js variable if this hidden input is only to make value available for js.

var artists_likes_decoded = <?php echo $artist_likes ?>

answered Aug 8, 2014 at 6:30

Zentoaku

7674 silver badges12 bronze badges

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

3 Comments

Zentoaku Over a year ago

I should have mentioned that passing data directly to js should be avoided due to possible security leaks and code mess, but sometimes it's unavoidable :)

user1072337 Over a year ago

exactly what I was trying to avoid by doing this

user1072337 Over a year ago

Is there a way for it to not break the HTML parsing so the JS gets the literal value?

Collectives™ on Stack Overflow

Sending a JSON encoded PHP variable to JS with Laravel 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related