Uncaught SyntaxError: Unexpected end of input While doing JSON.Parse

Question

HTML & PHP:

<select id="package">
    <?php $package_size_array = array('size_a' => 70, 'size_b' => 90, 'size_c' => 130); ?>
    <option value="size" id="<?php echo json_encode($package_size_array, JSON_PRETTY_PRINT); ?>">Size</option>
    <!--Some more <option>s here...-->
</select>

JavaScript:

$(document).ready(function() {  
    $('select#package').change(function() {
        var id = $(this).children(':selected').attr('id');
        alert(JSON.parse(id)); /* Line 217. in functions.js file */
    });
});

Problem: Chrome and probably other browsers' console prints:

Uncaught SyntaxError: Unexpected end of input functions.js:217
(anonymous function) functions.js:217
jQuery.event.dispatch jquery.js:4371
elemData.handle

Answer 1

Unless the data you are converting to JSON consists solely of a Boolean or a Number, the resulting JSON is going to contain " characters.

You are using " characters to delimit your ID attribute value, so the first one in the data is going to end the attribute prematurely.

This would be much more obvious if you examined the data you were sending to the browser (with view > source) instead of just looking at the PHP.

You need to convert the text representation of the JSON to an HTML representation of it.

id="<?php echo htmlspecialchars(json_encode($package_size_array)); ?>"

You should also remove JSON_PRETTY_PRINT, it is useful for debugging but inefficient in practice and new lines aren't a good fit for attribute values.

---

That said, using JSON for an ID value is a terrible idea. If you want to store arbitrary data on an element, use a data-* attribute (you'll still need to convert the text to HTML though!)