javascript - JSON.parse throws error when parsing JSON that has HTML content

Question

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":"
<div class="new-company-field field-item">
<div class="fake-data">
Company
</div>
</div>
<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"}]');

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

Answer 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 "" is valid JSON, but the string literal '""' becomes the string " ", which is not valid JSON. If you want to get the string "", 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"}]"));