I am writing code that will use AJAX requests to get some HTML code from the server to embed, but I cannot seem to get the JSON format correct. Can anyone tell me what I am doing wrong?

{"response": 
 [
  {"code": "<div id=\”sponsors\” class=\”infoBox\” > <div class=\”title\”>THANK YOU 2011 SPONSORS!</div> <div class=\”section\”> <div class=\”party\”><a href=\”\”>Chick Russell Communications</a></div> <div class=\”cityState\”>Pasadena, California</div> <div class=\”description\”> Chick Russell Communications is a story-driven creative development pany, not a design-driven pany. It's one of our main distinguishing features. It doesn't matter how great it looks if it doesn't create the desired effect. <a href=\”/vendors/info/17280\”>more...</a> </div> <div class=\”web\”><a href=\”\”>www.ChickRussell</a></div> </div>  </div>"
  }
 ]
}

When I try to run JSON.parse() on it, I get a syntax error

Here is the code I am using to read the JSON:

<script language="JavaScript" type="text/javascript">
var newxhr = new XMLHttpRequest()

newxhr.onreadystatechange = getResponse

function getResponse(){
    if(newxhr.readyState == 4) {
        var response = newxhr.responseText;

        console.log(response)

        response = JSON.parse(response)

        newxhr.close;
    }
}

var url = "http://*.*/test.json";

newxhr.open("GET", url, true);
newxhr.send(null)
</script>

I am writing code that will use AJAX requests to get some HTML code from the server to embed, but I cannot seem to get the JSON format correct. Can anyone tell me what I am doing wrong?

{"response": 
 [
  {"code": "<div id=\”sponsors\” class=\”infoBox\” > <div class=\”title\”>THANK YOU 2011 SPONSORS!</div> <div class=\”section\”> <div class=\”party\”><a href=\”http://www.ChickRussell.\”>Chick Russell Communications</a></div> <div class=\”cityState\”>Pasadena, California</div> <div class=\”description\”> Chick Russell Communications is a story-driven creative development pany, not a design-driven pany. It's one of our main distinguishing features. It doesn't matter how great it looks if it doesn't create the desired effect. <a href=\”/vendors/info/17280\”>more...</a> </div> <div class=\”web\”><a href=\”http://www.ChickRussell.\”>www.ChickRussell.</a></div> </div>  </div>"
  }
 ]
}

When I try to run JSON.parse() on it, I get a syntax error

Here is the code I am using to read the JSON:

<script language="JavaScript" type="text/javascript">
var newxhr = new XMLHttpRequest()

newxhr.onreadystatechange = getResponse

function getResponse(){
    if(newxhr.readyState == 4) {
        var response = newxhr.responseText;

        console.log(response)

        response = JSON.parse(response)

        newxhr.close;
    }
}

var url = "http://*.*/test.json";

newxhr.open("GET", url, true);
newxhr.send(null)
</script>

• javascript
• ajax
• json

• that looks like valid json to me. Post the related code. – Ilia Choly Commented Aug 6, 2011 at 18:36

3 Answers 3

” and " are different characters. You need stright quotes, not curly ones. (Tell your browser to zoom in if you can't see the difference … and don't use an editor (e.g. many word processors) that converts to curly quotes automatically, use a proper text editor (I'm fond of ActiveState Komodo)).

Old answer (before the JSON in the question was revised):

The first thing you are probably doing wrong, is trying to build JSON by hand. Use a library instead.

The second thing you are doing wrong is HTML encoding (badly) your quote marks. To escape a " inside a JSON string you represent it as \".

The third thing (but it could be just that you are giving a poor example) is bothering to use an array for a single object.

When I try to run JSON.parse() on it, I get a syntax error

Despite the problems with it, what you have is valid JSON, so that should not happen. You appear to have reduced your test case so far that the problem you are having doesn't appear in it.

It's the double quotes. You used ” (Unicode: U+8221) instead of " (Unicode: U+34). Although they look very similar, they are two different chars.

The code below is valid:

{
"response": [
    {
        "code": "<div id=\"sponsors\" class=\"infoBox\" > <div class=\"title\">THANK YOU 2011 SPONSORS!</div> <div class=\"section\"> <div class=\"party\"><a href=\"http://www.ChickRussell.\">Chick Russell Communications</a></div> <div class=\"cityState\">Pasadena, California</div> <div class=\"description\"> Chick Russell Communications is a story-driven creative development pany, not a design-driven pany. It's one of our main distinguishing features. It doesn't matter how great it looks if it doesn't create the desired effect. <a href=\"/vendors/info/17280\">more...</a> </div> <div class=\"web\"><a href=\"http://www.ChickRussell.\">www.ChickRussell.</a></div> </div>  </div>"
    }
]
}

You can always check your JSON code with http://jsonlint./ - it's a great tool.

it seems to work for me: http://jsfiddle/6PV4M/1/

however, i did escape the single quotes.

var str = '{"response":[{"code": "<div id=\”sponsors\” class=\”infoBox\” > <div class=\”title\”>THANK YOU 2011 SPONSORS!</div> <div class=\”section\”> <div class=\”party\”><a href=\”http://www.ChickRussell.\”>Chick Russell Communications</a></div> <div class=\”cityState\”>Pasadena, California</div> <div class=\”description\”> Chick Russell Communications is a story-driven creative development pany, not a design-driven pany. It\'s one of our main distinguishing features. It doesn\'t matter how great it looks if it doesn\'t create the desired effect. <a href=\”/vendors/info/17280\”>more...</a> </div> <div class=\”web\”><a href=\”http://www.ChickRussell.\”>www.ChickRussell.</a></div> </div>  </div>"} ]}';

var obj = JSON.decode(str);
alert(obj["response"][0]["code"]);