Converting AJAX return data to JSON

Question

I am trying to retrieve data in a JSON object (which I have validated is correctly formatted) and output the data into the firebug console. I validated the JSON using JSONLint (http://jsonlint.com/) and know the data is not returning in JSON object because when I log it, it is logging as text rather than an object. When I look at the ajax post, there is a JSON tab and it shows the object, I just cannot retrieve it for some reason.

My ajax call is

    $.ajax({
        url:'/coords/base',
        data: { type: obj.type, id: obj.id },
        dataType:'text',
        type:'get',
        async:false,
        success: function(data) {
            console.log(data);
        }
    });

My return data looks like such:

    {   
        "1": {"name":"TEXT","coords":[        
            { "entry":3,"x":15,"y":15 }     
        ]}}

When I set the AJAX call to a variable and add .responseText; to the end of the call, I can retrieve the plaintext return of the AJAX call. I thought I could then just use $.serialize() or $.parseJSON() but then I get an error "uncaught exception: Syntax error, unrecognized expression."

The end goal would be to retrieve the content from this responseText and use the JSON object throughout my files. This call must be done synchronously because it loads in vital data.

Any help would be greatly appreciated.

Answer 1

Explicitly instruct jQuery to treat the response as text:

$.ajax({
  // ...
  dataType: "text",
  // ...
});

You will then be able to get the JSON string. However, if you plan to convert it to a JS value thereafter, let me stop you: jQuery can do that for you automatically. If you specify the dataType to "json", or just let jQuery make an intelligent guess, the data argument passed to the success: function will be the parsed JSON object.

Answer 2

why not use $.getJson()

which is equivilant to

 $.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

which you should then be able to do the following:

$.getJSON('file.json', function(data) {
$.each(data, function(i) {
       console.log(data[i]);
     });
    });

edit

perhaps, I am misunderstanding the problem.

EDIT #2 Perhaps this question would help: Is there a version of $getJSON that doesn't use a call back?

which suggests using this:

$.ajax({
    type: 'GET',
    url: 'whatever',
    dataType: 'json',
    success: function(data) { console.log(data);},
    data: {},
    async: false
});

which of course, looks like what you have, so I feel I need to step back and reanalyze the problem.