JSON.parse arroja un error al analizar JSON que tiene contenido HTML

Tengo el siguiente código que estoy tratando de usar y sigo recibiendo un error en el analizador JSON

var data = JSON.parse('[{"thisFieldname":"item-company-1","thisFieldHTML":"\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]');

se dice que JSON es JSON válido cuando lo probé en https://jsonformatter.curiousconcept.com/

Tu razonamiento es incorrecto. Comprobó que una expresión expr es JSON válida, y luego pensó que JSON.parse(' expr ') funcionaría.

El problema es que los literales de cadena no funcionan así.

La expresión “\ t” es JSON válido, pero la cadena literal '"\t"' convierte en la cadena “” , que no es JSON válida. Si desea obtener la cadena “\ t” , necesita la cadena literal '"\\t"' .

Así podrás escapar de todos estos personajes:

 console.log(JSON.parse("[{\"thisFieldname\":\"item-company-1\",\"thisFieldHTML\":\"\\n\\t\\t\\t\\t\\t
\\n\\t\\t\\t\\t\\t\\t
\\n\\t\\t\\t\\t\\t\\t\\tCompany\\n\\t\\t\\t\\t\\t\\t
\\n\\t\\t\\t\\t\\t
\\n\\t\\t\\t\\t
\",\"dataFieldName\":\"item-company-1\",\"locationIndex\":\"0\",\"locationLeft\":\"427.891px\",\"locationTop\":\"88.5625px\",\"itemWidth\":\"100px\",\"itemHeight\":\"34px\",\"fieldRole\":\"\",\"fieldDefault\":\"\",\"fieldTooltip\":\"\",\"fieldValidationRule\":\"\",\"fieldValidationCharSet\":\"\",\"fieldValidationDateFormat\":\"\",\"fieldDisplayFormat\":\"\",\"fieldValidationCountry\":\"\",\"fieldValidationMaxLen\":\"\",\"fieldValidationMinVal\":\"\",\"fieldValidationMaxVal\":\"\",\"fieldValidationRegExp\":\"\",\"fieldValidationFormula\":\"\",\"fieldValidationErrMsg\":\"\",\"valid\":\"\",\"condition-field\":\"\",\"condition-type\":\"\",\"condition-value-select\":\"\",\"fontName\":\"\",\"fontSize\":\"\",\"fontAlign\":\"\",\"fieldColorPicker\":\"\",\"fieldRequired\":\"false\",\"fieldReadOnly\":\"false\",\"fieldMasked\":\"false\",\"fieldMultiline\":\"false\"}]"));

\n en una cadena de JavaScript, el literal inserta un nuevo carácter de línea. Las nuevas líneas literales están prohibidas dentro de las cadenas JSON.

\" en una cadena de JavaScript literal inserta un carácter " . Un literal " en una cadena JSON terminará esa cadena.

El problema no es el HTML. Son los caracteres especiales. Debe escapar de la \ s (como \\ ) para que la secuencia de escape sea evaluada por el analizador JSON y no por el comstackdor de JavaScript.


Dicho esto, generar JSON y luego incrustarlo como un literal de cadena que se analiza inmediatamente parece demasiado complejo e inútil. Simplemente use un literal JS array en primer lugar y omita todo ese anidamiento.

Recibirá un error porque está intentando convertir un objeto a una cadena y luego analizarlo, sin la conversión adecuada.

Puedes usar ese objeto de dos maneras.

  1. utilizar directamente como un objeto
  2. primero convierta el Objeto a la cadena json adecuada usando JSON.stringify y luego analícelo. ver código de ejemplo a continuación

Código de ejemplo

 data = [{"thisFieldname":"item-company- 1","thisFieldHTML":"\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]; data = JSON.parse(JSON.stringify([{"thisFieldname":"item-company- 1","thisFieldHTML":"\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
","dataFieldName":"item-company-1","locationIndex":"0","locationLeft":"427.891px","locationTop":"88.5625px","itemWidth":"100px","itemHeight":"34px","fieldRole":"","fieldDefault":"","fieldTooltip":"","fieldValidationRule":"","fieldValidationCharSet":"","fieldValidationDateFormat":"","fieldDisplayFormat":"","fieldValidationCountry":"","fieldValidationMaxLen":"","fieldValidationMinVal":"","fieldValidationMaxVal":"","fieldValidationRegExp":"","fieldValidationFormula":"","fieldValidationErrMsg":"","valid":"","condition-field":"","condition-type":"","condition-value-select":"","fontName":"","fontSize":"","fontAlign":"","fieldColorPicker":"","fieldRequired":"false","fieldReadOnly":"false","fieldMasked":"false","fieldMultiline":"false"}]));