Syntax error when parsing JSON string

Question

I have a sample JSON with some part of my webpage rendered :

{"html": {"#data": "\n<h2>Data</h2>\n<div class="\&quot;manufacturer-image\&quot;">\n \n</div>\n
<form action="\&quot;/manage/update-manufacturer-data/3\&quot;" method="\&quot;post\&quot;">\n \n 
<div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n <label for="\&quot;id_name\&quot;">Nazwa</label>:\n 
</div>\n \n \n <div class="\&quot;error\&quot;">\n 
<input id="\&quot;id_name\&quot;" name="\&quot;name\&quot;" maxlength="50" type="\&quot;text\&quot;">\n 
<ul class="\&quot;errorlist\&quot;"><li>Pole wymagane</li></ul>\n </div>\n \n </div>\n\n 
<div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n <label for="\&quot;id_image\&quot;">Zdjecie</label>:\n 
</div>\n \n \n <div>\n <input name="\&quot;image\&quot;" id="\&quot;id_image\&quot;" type="\&quot;file\&quot;">\n 
</div>\n \n </div>\n\n <div class="\&quot;field\&quot;">\n <div class="\&quot;label\&quot;">\n 
<label for="\&quot;id_description\&quot;">Opis</label>:\n </div>\n \n \n <div>\n 
<textarea id="\&quot;id_description\&quot;" rows="10" cols="40" name="\&quot;description\&quot;"></textarea>\n </div>\n \n 
</div>\n \n <div class="\&quot;buttons\&quot;">\n <input class="\&quot;ajax-save-button" button\"="" type="\&quot;submit\&quot;">\n 
</div>\n</form>"}}

This string is returned with ajax call and jQuery 1.6.1 throws an error :

SyntaxError: JSON.parse: expected ',' or '}' after property value in object

in the following part of the code :

parseJSON: function( data ) {
    if ( typeof data !== "string" || !data ) {
        return null;
    }
    // Make sure leading/trailing whitespace is removed (IE can't handle it)
    data = jQuery.trim( data );

    // Attempt to parse using the native JSON parser first
    if ( window.JSON && window.JSON.parse ) {
        console.warn('data: ', data);
        var ret;
        try{
            ret = window.JSON.parse(data);
        } catch(e){
            ret = {};
            console.warn(e);
        }
        return ret;
        //return window.JSON.parse( data );
    }

What am I missing here ?

---

EDIT:

I have parsed through the previous 'json' (which by the way was created with python's simplejson lib, so I wonder how can this be working anywhere) and now jsonlint shows, that I have proper JSON. Still the problem remains the same. The new string :

{"html": [{"#data": "\n<h2>Data</h2>\n<div class=&quot;manufacturer-image&quot;>\n    \n</div>\n<form action=&quot;/manage/update-manufacturer-data/4&quot; method=&quot;post&quot;>\n        \n    <div class=&quot;field&quot;>\n        <div class=&quot;label&quot;>\n            <label for=&quot;id_name&quot;>Nazwa</label>:\n        </div>\n        \n        \n            <div class=&quot;error&quot;>\n                <input id=&quot;id_name&quot; type=&quot;text&quot; name=&quot;name&quot; maxlength=&quot;50&quot; />\n                <ul class=&quot;errorlist&quot;><li>Pole wymagane</li></ul>\n            </div>\n        \n    </div>\n\n    <div class=&quot;field&quot;>\n        <div class=&quot;label&quot;>\n            <label for=&quot;id_image&quot;>Zdjecie</label>:\n        </div>\n        \n        \n            <div>\n                <input type=&quot;file&quot; name=&quot;image&quot; id=&quot;id_image&quot; />\n            </div>\n        \n    </div>\n\n    <div class=&quot;field&quot;>\n        <div class=&quot;label&quot;>\n            <label for=&quot;id_description&quot;>Opis</label>:\n        </div>\n        \n        \n            <div>\n                <textarea id=&quot;id_description&quot; rows=&quot;10&quot; cols=&quot;40&quot; name=&quot;description&quot;></textarea>\n            </div>\n        \n    </div>\n  \n    <div class=&quot;buttons&quot;>\n        <input type=&quot;submit&quot; class=&quot;ajax-save-button button&quot; />\n    </div>\n</form>"}]}

EDIT2: Ok it looks, that JSOn leaving my backend is proper but dumb jQuery adds additional quotes around each '"' which is kinda odd.

Solution 1

The data is not valid JSON, since \" in strings seems to have been replaced with "\.

Contact the author of that supposedly-JSON and notify him or her that there are plenty of JSON libraries available for all languages and platforms.

Solution 2

storejson= getJSonObject("@ViewBag.JsonData");

function getJSonObject(value) {
    return $.parseJSON(value.replace(/"/ig, '"'));
}

Solution 3

I might be mistaken here but I think it's due to the JSON data itself it doesn't work. The JSON parser probably chokes on the double-quotes in the HTML contained in the JSON'ed string variable. I think it will work when you pre-process the HTML string before outputting the JSON data so you change the double-quotes into something else. ( and do the other way around after parsing the JSON data )

An example might clarify a bit:

instead of this: {"html": { "#data": "<input name="somename" type="text"/>"} }

i'd try to use this:

{"html": { "#data": "<input name=&quot;somename&quot; type=&quot;text&quot;/>"} }

Hope it helps...

Solution 4

JSON = Javascript Object Notation, therefor the value of the "#data"property is an invalid string.

You can validate your JSON here

View more solutions