JSON портится, когда возвращаемые данные содержат теги HTML

Question

У меня есть страница PHP, которая возвращает объект JSON, подобный этому:

  header('Content-Type:application/json');
  echo <<<HERE_DOC
      [ {content: '{row2[contentFull]}', bigimages: '{$row3['catalogFileID']}'}]
      HERE_DOC;

На моей главной странице есть следующий код jQuery:

jQuery(function()
{
  jQuery("select#rooms").change(function()
  {
    var options = '';

    jQuery.getJSON("/admin/selection_about.php",{id:jQuery(this).val(), 
                   ajax:isAjax}, function(j)
    {
       for (var i = 0; i < j.length; i++) 
       {
          options = j[i].topImage;
          document.getElementById('content1').value = j[i].bigimages;
       }
    })
  })
})

Так что в основном на моей главной странице есть выпадающий список. Когда опция выбрана, она запускает Ajax-запрос обратно на сервер. Я получаю данные в формате JSON, а затем текстовое поле с идентификатором «content1» обновляется на основе этого объекта JSON.

Объект JSON выглядит следующим образом:

[ 
  {  
     content: '<SPAN STYLE= "" >&quot;
     this is some text&quot; 
     blah blah, &quot;
     some more `text&quot;  
     now some linebreaks; 
     <BR><BR>some more text and then another` linebreak.`<BR>`</SPAN>',
     bigimages: 'cfil1069'
   }
]`

Но здесь возникают ошибки, и моя текстовая область не обновляется. Однако, если я жестко закодирую простой простой текст, который должен быть возвращен в объекте JSON, моя текстовая область обновляется.

Существует ли условие, при котором данные в объекте JSON не должны иметь тегов HTML?

Edit:

Как и предполагалось, я изменил свой код на следующий в PHP-коде:

$arr = array ('content'=>$rest1,'bigimages'=>$row3['catalogFileID']);
echo json_encode($arr);

Однако теперь в моем коде jQuery:

длина j не определена ...

    jQuery.getJSON("/admin/selection_about.php",{id: jQuery(this).val(), 
                   ajax: isAjax}, function(j)
    {
       alert('here3: ' + j.length); // this shows undefined

       for (var i = 0; i < j.length; i++) 
       {
          document.getElementById('content1').value = j[i].content;
       }
    })

Answer 1

Поместите ваш контент в массив PHP. Затем преобразуйте его в JSON, используя json_encode().
Это безопасно кодирует и экранирует символы, например двойные кавычки в вашем атрибуте HTML.

UPDATE:

Причина, по которой j.length не работает, заключается в следующем:
Массив PHP с ключами не являются массивами Javascript. Массивы Javascript не имеют ключей. Таким образом, при преобразовании массив PHP преобразуется в объект JS.

Вместо того, чтобы получить доступ к вашему объекту JS, вы можете использовать j.content вместо того, чтобы проходить по объекту с помощью j.length. j.length не определено, потому что в объекте j нет свойства с именем свойства length (то есть, потому что в вашем массиве PHP нет $arr['length'])