title: How to parse a json object using jquery
body: <p>I think that it is a very basic question, but I have spent hours looking for an answer with no luck, I've the following json object (generated using play!Framework)</p>
  
  <pre><code>{
      "preg.pregunta": [{
          "message":"Debes escribir una pregunta",
          "key":"preg.pregunta",
          "variables":[]
      }],
      "preg":[{
          "message": "validation.object",
          "key":"preg",
          "variables":[]
      }]
  }
  </code></pre>
  
  <p>This is my jquery piece of code</p>
  
  <pre><code>$.ajax({
      type: $target.attr('method'),
      data: dataString,
      url:$target.attr('action'),
      dataType: "json",
      beforeSend: function() {
          //some stuff
      },
      success:function(response){
          //some stuff
      },
      error: function(response){
          //I want to use the json response here.
      }
  });
  </code></pre>
  
  <p>I want to get all inside <code>preg.pregunta</code> (<code>message</code> and <code>key</code> values)</p>
  
  <p>Any help?</p>
  
  <p><strong>UPDATED</strong>: well I don't have enough reputation to answer to myself, this is what I've found so far.</p>
  
  <p>Ok maybe it would be more than obvious or I have to study a bit more; I found that jQuery doesn't parse properly a JSON response if it came along with a HTTP error (400 in this case).</p>
  
  <p>someone knows why this behavior?</p>
  
  <p>I just tested this code in <code>success</code> handler and works perfectly!</p>
  
  <pre><code>$.ajax({
    type: $target.attr('method'),
    data: dataString,
    url:$target.attr('action'),
    dataType: "json",
    beforeSend: function() {
    },
    success:function(response){
      //It is working perfectly!
      $.each(response,function(object){ //first loop of the object
        $.each(response[object],function(values){ //looping inside arrays
          console.log(response[object][values].key) //getting value "key"
          console.log(response[object][values].message) //getting value "message"
        });
      })
    },
    error: function(response){
      //nothing happens here
    }
  });
  </code></pre>
  
  <p>UPDATED 2.</p>
  
  <p>after searching about 2 hours, I've found a straightforward solution:</p>
  
  <pre><code>error: function(response){
  //Note the jQuery.parseJSON function
  var response = jQuery.parseJSON(response.responseText);
    $.each(response,function(object){
      $.each(response[object],function(values){
        console.log(response[object][values].key)
        console.log(response[object][values].message)
      });
    })
  }
  </code></pre>
  
  <p>Explanation: when using error handler, jQuery returns a complex object describing the error, responseText contains the data retrieved from the server, so, you have to parse it using parseJSON function.</p>
  
  <p>Hope this helps!</p>