Ошибка JSON.parse и JSON.stringify для специального символа в строке - PullRequest
Новая
       13

Ошибка JSON.parse и JSON.stringify для специального символа в строке

0 голосов
/ 30 августа 2018 

console.log(JSON.stringify($('.btn').attr('data-obj')))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-info user_action" data-action="edit_faqs" data-obj="{SysID:2,Artist:Json Mras,Song:I'm yours}" data-toggle="modal " data-target="#SongsModal
  "><i class="fa fa-edit "></i> Edit</button>

Я нашел это , но это немного отличается в моем случае.

Когда я попытался использовать JSON.stringify для данных, которые я вижу в инструментах разработки 

//I want I'm Yours
"{\"Song\":\"I"

Данные хранятся в моей базе данных, и я получаю их в виде запроса ajax, и я хочу использовать JSON.stringify, потому что я положу их как data-* на кнопку, которая будет использоваться при нажатии на кнопку. , При нажатии кнопки я хочу использовать JSON.parse, чтобы я мог выполнить итерацию по ней.

Как экранировать все специальные символы в JSON.stringify и JSON.parse

Ошибка:

Uncaught SyntaxError: Неожиданный конец ввода JSON

Это указывает на JSON.stringify

enter image description here

Добавлен фрагмент, но проблема не воссоздана, поэтому я добавил изображение

База данных:

enter image description here

Обновление:

Я получаю данные из запроса ajax. После получения данных я использую data_array = JSON.stringify(data[i]);, затем применяю данные как data-obj='" + data_array + "'

1 Ответ

0 голосов
/ 30 августа 2018

Это не проблема с JSON, это проблема вашего неправильного использования HTML.

Вы вставили необработанную строку в атрибут HTML, возможно, из шаблона, возможно, выполнив что-то вроде 

<button data-obj="<?php echo json_encode($data); ?>">

Или, возможно, в JavaScript 

container.innerHTML = '<button data-obj="' + JSON.stringify(data) + '">';

так что ваши кавычки в конечном итоге конфликтуют с HTML. Вам нужно изменить ваши кавычки на HTML-сущности; минимум - это двойные кавычки " в &quot;, если вы используете двойные кавычки вокруг атрибута HTML (самый распространенный сценарий).

Вы не сказали нам, как вставить контент в HTML, поэтому я не могу рассказать вам, как это сделать, пока вы не укажете.

РЕДАКТИРОВАТЬ: Очевидно, вы строите HTML в JavaScript путем конкатенации. В этом случае решение, которое я показал, будет работать: 

container.innerHTML = '<button data-obj="' + data_array.replace(/"/g, '&quot;') + '">';

Или, если вы используете одинарные кавычки для включения атрибута (обычно это не делается, но, безусловно, вариант), вам нужно изменить эти на &apos; вместо: 

container.innerHTML = "<button data-obj='" + data_array.replace(/'/g, '&apos;') + "'>";

Однако, учитывая, что речь идет о JavaScript, и он может работать с DOM, и DOM знает, что к чему ... есть много других решений. Наиболее примитивным является работа с DOM напрямую: 

let button = document.createElement('button');
button.setAttribute('data-obj', data_array);
container.appendChild(button);

Когда вы делаете это, JavaScript манипулирует DOM напрямую, а не HTML, поэтому экранирование не требуется.

Уровень выше этого будет использовать библиотеку, как jQuery: 

$('<button>').data('obj', data_array).appendTo('#container');

Уровень, еще выше, который будет использовать библиотеку, которая использует привязку данных, такую ​​как Angular, React, Vue, Ractive ..., где вы просто устанавливаете значение для вашей модели, и документ автоматически отражает это изменение.

Изменение вручную " в &quot; необходимо только в том случае, если вы непосредственно манипулируете HTML.

...