Pulling JSON variable from an HTML input field with Javascript

Question

I have the following input HTML element that I have passed a json encoded php variable as the value. In the source it renders like this:

<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":""}]}">

I want to grab the value with javascript, json_decode it, and then use it as an array in JS. Like so:

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

However, when I print the artist_likes, it only comes out like:

"{"

in the console.

I know this is because the JSON contains quotes that break the parsing, but is there a way to pull the literal value with JavaScript?

you have to put that value of JSON array by applying slashes to it, and you are sorted. — TheMohanAhuja, Aug 09 '14 at 15:56
http://stackoverflow.com/questions/4287462/store-and-use-an-array-using-the-html-data-tag-and-jquery follow this link for more info — TheMohanAhuja, Aug 09 '14 at 16:00
I think if you use single quote for wrapping all of the data, instead of the double quotes, you should be fine. — TJ-, Aug 09 '14 at 16:01
how do I use single quotes to wrap the data? The double quotes are used automatically because I used json_encode on a php variable and passed it to the input value field. — user1072337, Aug 09 '14 at 16:04
@user1072337 You need to give the single quotes to the HTML attribute. — Praveen Kumar Purushothaman, Aug 09 '14 at 16:06

Praveen Kumar Purushothaman · Answer 1 · 2014-08-09T16:03:54.690

I believe that the error was because of unescaped quotes:

value="{"name":
--------^

The quote here is not escaped. Shouldn't it be:

value="{\"name\":

That might be the reason, it gets cut prematurely and shows the output as just {. Or the best way to handle this issue is by giving single quotes:

value='{"name":

It is also worth noting that JSON values should be with double quotes instead of single quotes. So, make sure, you give single quotes in HTML and double quotes inside JSON values and escape the single quotes found inside JSON values.

The possible PHP code for this would be:

value='<?php echo str_replace("'", "\\'", $jsonStuff); ?>'

score 0 · Answer 2 · answered Aug 09 '14 at 16:01

You need to escape the quotes, an easy way to do this is to use apostrophe:

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value='{"quotation mark value"}' >

However this is not full-proof if you cant guarantee that only quotation marks will be used, a better method would be escaping every single quotation mark, inside value with a backslash, like so:

<input type="hidden" id="js-helper-artist-likes" name="js-helper-artist-likes" value="{\"quotation mark value\"}" >

score 0 · Answer 3 · answered Aug 09 '14 at 16:06

0

hi i have created jsfiddle for you

Code:-

$(document).ready(function() {
    var data = JSON.parse($('#js-helper-artist-likes').val());
    console.log(data);
});

update code:- value='{"name" //-use the ' code in starting instead of "

working example:- http://jsfiddle.net/XUjAH/1104/

answered Aug 09 '14 at 16:06

Devendra Soni

1,924
12
16

You have already done the single quote change here `value='`, which the OP has to do. :) – Praveen Kumar Purushothaman Aug 09 '14 at 16:07

score 0 · Answer 4 · answered Aug 09 '14 at 16:06

If you can get that JSONEncode value in that HTML input value. Then, I think it will be a better practice the assign the encode value to a JavaScript defined variable:

<script type="text/javascript">
var artist_likes = <?= json_endoe($phpVariable) ?>;
console.log(artist_likes);
</script>

Pulling JSON variable from an HTML input field with Javascript

4 Answers4