JSON.parse unexpected character error encountered

Question

I try to get JSON values with the JQuery post method. Im write following code for generating JSON data with aspjson util from http://code.google.com/p/aspjson/

<!--#include file="JSON_2.0.4.asp"-->
<!--#include file="JSON_UTIL_0.1.1.asp"-->
<%
    Dim member
    Set member = jsObject()

    member("color1") = "Green"
    member("color2") = "Yellow"
    member("color3") = "Blue"

    member.Flush
%>

This code generates jQuery data;

{"color1":"green","color2":"red","color3":"blue"}

and finally my JQuery request and response code here:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
            <script> 
            jQuery(document).ready(function($) {    
            var formData = "A-1";

            $.ajax({
            method: "post",
            url: "return_json.asp",
            dataType: "json",
            data: formData,
            success: function (response) {
            var data = JSON.parse(response);
            $('#myJson').html('<table style="color:red"><tr><td>' + data.color1 + '</td><td>' + data.color2 + '</td></tr></table>');},
            error: function(){
            alert('Error Here...');}
        });
    });
    </script>
    <div id="myJson"></div>

When I refresh the page I get this error:

SyntaxError: JSON.parse: unexpected character
var data = JSON.parse(response);

What could be the problem?

Answer 1

Use this,

    $('#myJson').html('<table style="color:red"><tr><td>' + response.color1 + '</td><td>' + response.color2 + '</td></tr></table>');

And remove the below line : There is no need of parse the json again.

 var data = JSON.parse(response);

Answer 2

The success response data which you are receiving is already in JSON. Remove JSON.parse

$.ajax({
            method: "post",
            url: "return_json.asp",
            dataType: "json",
            data: formData,
            success: function (response) {
            $('#myJson').html('<table style="color:red"><tr><td>' + response.color1 + '</td><td>' + response.color2 + '</td></tr></table>');},
            error: function(){
            alert('Error Here...');}

Answer 3

$.ajax will parse the incoming JSON for you, so the response variable in your success callback has already been parsed into a JS object when you receive it.

From the documentation of jQuery.ajax on when using "json" as datatype:

Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead.

Remove JSON.parse and read the data from your response variable directly, and you should be all good.

success: function (response) {
   $('#myJson').html('<table style="color:red"><tr><td>' + response.color1 + '</td><td>' + response.color2 + '</td></tr></table>');
}