Issues accessing nested JSON objects via javascript/jQuery

Question

This is the JSON i'm getting:

{"status":"failure","msg":{"name":["can't be blank"],"email":["can't be blank","is invalid"]}}

This is the javascript i'm using:

$("#sign_in_form").submit(function() {
  var success_function = function(data) {
    if(data.status == 'failure') {
      $("#error_msg").html(data.msg.name)
    }
  };

  $.post($(this).attr("action"), $(this).serialize(), success_function, "json");
});

The error I'm getting from Firebug is:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost:3000/assets/jquery.js?body=1 :: <TOP_LEVEL> :: line 6182" data: no]

Everything works fine. My javascript can access the data.status value but using data.msg.name produces the uncaught exception.

Answer 1

try

data.msg.name[0]

Hope that helps

Answer 2

it should be

$("#error_msg").html(data.msg.name[0] || '');