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
– TheMohanAhuja, Commented Aug 9, 2014 at 15:56
stackoverflow.com/questions/4287462/… follow this link for more info — TheMohanAhuja
– TheMohanAhuja, Commented Aug 9, 2014 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-
– TJ-, Commented Aug 9, 2014 at 16:01

Praveen Kumar Purushothaman · Accepted Answer · 2014-08-09 16:03:54Z

1

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); ?>'

edited Aug 9, 2014 at 16:03

answered Aug 9, 2014 at 15:58

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Comments

Daniel McAssey · Accepted Answer · 2014-08-09 16:01:06Z

0

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\"}" >

answered Aug 9, 2014 at 16:01

Daniel McAssey

4365 silver badges18 bronze badges

Comments

Devendra Soni · Accepted Answer · 2014-08-09 16:06:04Z

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 9, 2014 at 16:06

Devendra Soni

1,93412 silver badges16 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

You have already done the single quote change here value=', which the OP has to do. :)

Paullo · Accepted Answer · 2014-08-09 16:06:15Z

0

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>

answered Aug 9, 2014 at 16:06

Paullo

2,1374 gold badges31 silver badges51 bronze badges

Collectives™ on Stack Overflow

Pulling JSON variable from an HTML input field with Javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related