Skip to content Skip to sidebar Skip to footer
Home / Javascript

Json.parse Throws Error When Parsing Json That Has Html Content

Post a Comment
I have the following code that I'm trying to use and I keep getting an error on the JSON parser var data = JSON.parse('[{'thisFieldname':'item-company-1','thisFieldHTML':'\n\t\t\t\

Solution 1:

Your reasoning is wrong. You checked that an expression expr is valid JSON, and then thought that JSON.parse('expr') would work.

The problem is that string literals don't work like that.

The expression "\t" is valid JSON, but the string literal '"\t"' becomes the string " ", which is not valid JSON. If you want to get the string "\t", you need the string literal '"\\t"'.

So you can escape all these characters:

console.log(JSON.parse("[{\"thisFieldname\":\"item-company-1\",\"thisFieldHTML\":\"\\n\\t\\t\\t\\t\\t<div class=\\\"new-company-field field-item\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"fake-data\\\">\\n\\t\\t\\t\\t\\t\\t\\tCompany\\n\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t<div class=\\\"ui-resizable-handle ui-resizable-e\\\" style=\\\"z-index: 90; display: block;\\\"></div><div class=\\\"ui-resizable-handle ui-resizable-s\\\" style=\\\"z-index: 90; display: block;\\\"></div><div class=\\\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\\\" style=\\\"z-index: 90; display: block;\\\"></div>\",\"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\"}]"));

Or directly use the object and let the JS parse it:

console.log([{"thisFieldname":"item-company-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","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"}]);

Solution 2:

\n in a JavaScript string literal inserts a new line character. Literal new lines are forbidden inside JSON strings.

\" in a JavaScript string literal inserts a " character. A literal " in a JSON string will terminate that string.

The problem isn't the HTML. It is the special characters. You need to escape the \s (as \\) so that the escape sequence is evaluated by the JSON parser and not the JavaScript compiler.

That said, generating JSON then embedding it as a string literal which is immediately parsed seems overly complex and pointless. Just use a JS array literal in the first place and skip all that nesting.

Solution 3:

You are getting error because you are trying to convert and Object to string then parse it, without proper conversion.

you can use that object in two ways.

  1. use directly as an Object
  2. first convert Object to proper json string using JSON.stringify and then parse it. see below example code

Example Code

data = [{"thisFieldname":"item-company-   1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","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<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","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"}]));

Solution 4:

Another option to avoid string literal expansion (explained by the other answers) is by using String.raw available since ES6.

var data = JSON.parse(String.raw`[{"thisFieldname":"item-company-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-company-field field-item\">\n\t\t\t\t\t\t<div class=\"fake-data\">\n\t\t\t\t\t\t\tCompany\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t<div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90; display: block;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90; display: block;\"></div>","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"}]`);

Short example:

String.raw`Hi\n${2+3}!`;
// 'Hi\n5!', the character after 'Hi'// is not a newline character,// '\' and 'n' are two characters.

Read more on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

You may like these posts

Post a Comment for "Json.parse Throws Error When Parsing Json That Has Html Content"