Question

我有一个Ajax调用，返回一个json哈希，包括错误，如果出现任何问题。这是一个例子：

{"success":false,"errors":{"image":["file must be at least 1024x768px in size."]},"content_type":"text/json"}

基于this question我能够弄清楚我可以像这样打印部分哈希：

JSON.stringify( responseJSON.errors )

但是，这仍然会打印为代码哈希，例如：{"image":["file must be at least 1024x768px in size."]}

我真的想把它转换成简单的：

Image file must be at least 1024x768px in size.

在.replace之后使用stringify，是否有直接的方法可以做到这一点？请注意，错误哈希可能包含更多错误，例如：

{"image":["file must be at least 1024x768px in size."],"file":["type is invalid, must be jpg, png, or gif"]}

更新：我不知道原因，但下面显示的任何函数都不会在传递responseJSON对象时返回字符串。但是，使用jQuery直接附加到DOM确实有效。这就是我最终做的事情：

// In the middle of an ajax callback
$('.qq-upload-failed-text:last').append(': <span class="explanation"></span>');
formatErrors( responseJSON );

// As a stand-alone function so it can be reused
function formatErrors( response ) {
  $.each( response.errors, function(key, value) {
    $('span.explanation:last').append( key + " " + value );
  });
}

为什么会将文本正确地插入到dom中，但是使用Dampsquid的函数或者其他任何函数只会返回一个空字符串超出我的范围。

Answer 1

你可以像这样迭代错误：

for (var name in responseJSON.errors) {
    var message = responseJSON.errors[name];
}

不确定您希望如何显示错误消息，因此我会将其留给您。但这应该足以从JSON对象中获取您想要的信息。

Answer 2

迭代错误并将它们附加到元素上。

$("#errors").empty();
$.each(responseJSON.errors, function(key, value) {
    $("#errors").append("<div>" + key + " " + value + "</div>");
});

Answer 3

基于您的JSON：var myStr = "Image " + responseJSON.errors.image[0];

如果你想获得所有错误，他们将不止一个：

var errors = '';
for(var i = 0; i<responseJSON.errors; i++) {
   errors += responseJSON.errors[i] + ','
}

Answer 4

var response = {"image":["file must be at least 1024x768px in size."],"file":["type is invalid, must be jpg, png, or gif"]};

var errors = "";
for (var prop in response) {
    errors += prop + ": " + response[prop] + "\n";
}
alert(errors);

工作示例：http://jsfiddle.net/zFdmZ/3/

Answer 5

这是一个简单的纯JS解决方案，

它还考虑到每种类型的错误都有一个可能的错误文本数组。

JSFiddle

function FormatErrors( response )                                  
{
    var s = "";
    for( var name in response.errors )
    {
        s += "<p><span class='error'>" + name + ":</span> ";
        s += response.errors[name].join( "</p><p><span class='error'>"+name+ ":</span> " );
        s += "</p>";
    }
    return s;
}

修改

更新以添加简单的css格式并返回一个字符串以允许插入另一个元素。还更新了Fiddle。

Answer 6

JSON响应实际上是一个对象，因此您只需读取其属性即可。就像您可以阅读responseJSON.errors一样，您也可以阅读responseJSON.errors.image[0]来读取JSON响应的errors子对象中图像数组的第一项。

alert(responseJSON.errors.image[0]);

Answer 7

你最好循环你的对象，而不是尝试对其进行字符串化，然后应用字符串方法。

var json = {"image":["file must be at least 1024x768px in size."],"file":["type is invalid, must be jpg, png, or gif"]},
    output = [];

for( var key in json ) {
  output,push( key + ' ' + json[key] );
}

output = ouput.join( '<br />' );

Answer 8

对于这种类型的任务，我倾向于使用惊人的underscore.js库。然后你可以做类似以下的事情：

function parseErrors(responseJSON) {
  var errs = JSON.stringify(responseJSON.errors),
    errStr = _(errs).reduce(function (memo, str, key) { 
      return memo + "\n" + key + " " + str;
    }, '');
    return errStr.replace(/^\n/, '');
}

这将返回如下内容：

image file must be at least 1024x768px in size.
file type is invalid, must be jpg, png, or gif

根据您实现此目的的位置，您可以使用本机Array reduce()函数执行类似操作（请参阅MDN documentation）。

此外，如有必要，您可以使用HTML中断元素<br />替换换行符“\ n”。

将JSON哈希转换为人类可读的字符串

8 个答案: