Uncaught SyntaxError: Неожиданный конец ввода Во время выполнения 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 */ 
    }); 
}); 

Проблема: Chrome и, возможно, другие браузеры консоли печатает:

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

Answer 1

Если данные, которые вы конвертируете в JSON, состоят исключительно из булевых или a Number, в результате JSON будет содержать " символов.

Вы используете символы ", чтобы разграничить значение идентификатора вашего идентификатора, поэтому первый в данных должен преждевременно прекратить действие атрибута.

Это было бы гораздо более очевидным, если бы вы исследовали данные, которые вы отправляли в браузер (с view > source), а не просто смотрели на PHP.

Вам нужно преобразовать текстовое представление JSON в его представление HTML.

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

Вы должны также удалить JSON_PRETTY_PRINT, это полезно для отладки, но неэффективен на практике, и новые линии не хорошо подходят для значений атрибутов.

Это говорит о том, что использование JSON для значения идентификатора является ужасной идеей. Если вы хотите хранить произвольные данные для элемента, используйте a data-* attribute (вам все равно нужно преобразовать текст в HTML!)