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-pany-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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"}]');

the JSON is said to be valid JSON when I tried it on /

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-pany-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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"}]');

the JSON is said to be valid JSON when I tried it on https://jsonformatter.curiousconcept./

• javascript

• What's the source of your JSON code? If JSON is hardcoded, then you should just directly assign it to data variable without calling JSON.parse(). – Marat Tanalin Commented Aug 30, 2016 at 23:45
• JSON is being sent down from server and stored in a <input type="text"> field as the value so that it can be access by javascript. This is the only way I could think of passing JSON directly from PHP to Javascript to be able to be sorted through – eqiz Commented Aug 30, 2016 at 23:53

4 Answers 4

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"' bees 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-pany-1\",\"thisFieldHTML\":\"\\n\\t\\t\\t\\t\\t<div class=\\\"new-pany-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-pany-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-pany-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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 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 piler.

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

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-pany-   1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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-pany-   1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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"}]));

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-pany-1","thisFieldHTML":"\n\t\t\t\t\t<div class=\"new-pany-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-pany-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/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw