JSON déconner quand les données renvoyées a des balises HTML

Question

J'ai une page PHP qui retourne un objet JSON comme ceci:

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

Dans ma page principale, j'ai le code jQuery suivant:

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; 
     } 
    }) 
    }) 
}) 

Donc, fondamentalement, dans ma page principale, j'ai une liste déroulante. Lorsqu'une option est sélectionnée, elle renvoie une requête Ajax au serveur. Je reçois les données au format JSON, puis une zone de texte, avec l'ID 'content1', est mise à jour en fonction de cet objet JSON.

L'objet JSON ressemble à ceci:

[ 
    { 
    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' 
    } 
]` 

Mais il y a des erreurs qui se produisent ici et mon textarea ne soit pas mis à jour. Cependant, si je code en dur le texte brut simple à renvoyer dans l'objet JSON, alors ma zone de texte est mise à jour.

Existe-t-il une condition pour laquelle les données de l'objet JSON ne doivent pas contenir de balises HTML?

Edit:

Comme suggéré, j'ai changé mon code à suivre dans le code PHP:

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

Mais maintenant, dans mon code jQuery:

longueur j est 'undefined' ..

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

Mettez votre contenu dans un tableau PHP. Puis le convertir en JSON en utilisant json_encode().
Cela va encoder et échapper les caractères en toute sécurité, par exemple des guillemets doubles dans votre attribut HTML.

MISE À JOUR:

La raison pour laquelle j.length ne fonctionne pas parce que:
Un tableau PHP avec les touches ne sont pas des tableaux Javascript. Les tableaux Javascript n'ont pas de clés. Ainsi, lors de la conversion, le tableau PHP est converti en un objet JS. Au lieu d'accéder à votre objet JS, vous pouvez utiliser j.content au lieu de boucler l'objet avec j.length. j.length est définie parce qu'il n'y a pas de propriété dans l'objet j avec le nom de la propriété length (qui est parce que dans votre tableau PHP, il n'y a pas $arr['length'])