将JSON编码的PHP变量发送给JS

I am trying to send a PHP variable to my javascript. In order to do this, I encode the php variable with json, send it to my view with my controller, use it as a value in a hidden html form, and then pull the value with js, using parseJSON to get the final product.

HTML (I'm using laravel, the brackets are equivalent to php tags):

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="{{$artist_likes}}">

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

In the page source, I see that the value is populating with the json string, but when I print it to the console from my js like the above, all that is showing is: [{

I am not sure why this is.

I want to perform:

var artist_likes_decoded = $.parseJSON(artist_likes);

to get the decoded variable in JS, but this is impossible without the encoded string coming up correctly in the artist_likes variable in js.

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

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

You could use:

 <input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="<?= json_encode($artist_likes) ?>">

    <?php
      $yourVariable ="something";
      $arr = json_encode(array("name"=>$yourVariable));
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value='<?php echo $arr; ?>'>
<script>
$(document).ready(function(){
var artist_likes = $('#js-helper-artist-likes').val();
console.log($.parseJSON(artist_likes));
});

</script>
</body>
</html>