Побег, описанный в укусе с JS
У меня проблема с моим скриптом со следующим var:
var jsondatacats = eval(currentbtn.attr("data-jsond"));
это работало хорошо, пока атрибут data-json не получил строку, в которой одно из значений содержало одинарную кавычку «Как сделать».
В будущем я позабочусь о том, чтобы мой PHP уловил это, но на данный момент мне интересно, смогу ли я решить эту проблему и остановить JS-скрипт от выдачи ошибки с помощью JS-решения.
Является ли это возможным?
Каков пример значения этого атрибута? Как это установлено в вашем HTML?
Вы мало что можете сделать с существующими значениями, которые не отформатированы должным образом. В дальнейшем вы должны использовать json_encode() (в PHP) или JSON.stringify() (в JavaScript) для заполнения атрибута. Кроме того, если вы используете метод jQuery .data(), он автоматически анализирует JSON.
@Фил, спасибо за предложение. Я пробовал JSON.parse(), но теперь получаю другую ошибку: «SyntaxError: JSON.parse: неопределенная строка в строке 1 столбца 749 данных JSON»
@Phil Я обновил свой пост примером из реальной жизни.
Где конец значения атрибута?
@Phil - добавил скриншот. По какой-то причине инструменты разработчика преобразовали все кавычки, когда я вставлял.
Это именно то, что делает dev-tools. Это делает закодированные значения читабельными. Ваш исходный код HTML будет источником правды
Имеет смысл. Я обновился из исходного кода.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Собираюсь предположить, что вы используете что-то подобное в своем PHP-скрипте.
<i data-jsond='<?= json_encode($someVariable) ?>'></i>
Проблема здесь в том, что любые одинарные кавычки в выводе JSON преждевременно завершат значение вашего атрибута. То же самое произошло бы, если бы вы использовали двойные кавычки вокруг значения атрибута.
При вставке значений в HTML всегда убедитесь, что вы правильно их кодируете. Например
<i data-jsond = "<?= htmlspecialchars(json_encode($someVariable)) ?>"></i>
Это создаст что-то вроде следующего, которое можно разобрать как JSON
const jsonData = $('#currentButton').data('jsond')
// or jsonData = JSON.parse($('#currentButton').attr('data-jsond'))
$.each(jsonData, function(key, val) {
console.info(key, ':', val)
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<i id = "currentButton" data-jsond = "{"message":"Hello 'world'"}"></i>Лемм дать ему вихрь
Теперь я получаю еще одну ошибку: TypeError: невозможно использовать оператор «in» для поиска «длины» в «[{"id":"140593",... Я обновил свой OP с полной функцией. Теперь ошибка переместилась на строку $.each.
Кажется, вы все еще используете eval(). Как я уже говорил, не делай этого
Это исходная функция. С тех пор я изменился на JSON.parse(), но ошибка сместилась на $.each
Хорошо, думаю, я понял. Я также добавил JSON.parse(jsondataformergedcats) в $.each, и теперь все работает. Фу... Спасибо за помощь!
Не используйте
eval(). Если значением атрибутаdata-jsondявляется JSON, используйтеJSON.parse()