将JSON哈希转换为易读的字符串

Question

我有一个Ajax请求，返回一个json哈希，如果出现错误，则包括错误信息。以下是一个示例：

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

基于这个问题，我能够找出如何打印哈希表的一部分：

JSON.stringify( responseJSON.errors )

然而，这仍然以代码哈希值的形式打印出来，例如：{"image":["file must be at least 1024x768px in size."]}

我真的很想将其简化为：

Image file must be at least 1024x768px in size.

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

{"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或其他任何方法都只会返回空字符串，这让我想不通。

- Andrew

---

听起来你想要循环遍历对象并自己组装一个字符串。 - SLaks

好的，这段代码位于其他代码的中间，因此我想要做的基本上是创建一个简单的函数，可以将错误对象传递给它并返回一个字符串。 - Andrew

Answer 1

遍历错误并将其附加到一个元素上。

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

- Kevin B

Answer 2

您可以像这样遍历错误：

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

不确定您想如何显示错误消息，所以我会把这个交给您。但这应该足以从JSON对象中获取所需的信息。

- Kevin Pang

Answer 3

根据你的 JSON: var myStr = "Image " + responseJSON.errors.image[0];

如果你想要获取所有的错误，而不只是一个：

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

- Justin Thomas

---

我认为这种方法会忽略每个消息开头的错误类型。 - Horatio Alderaan

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/

- Sean

---

我从一个名为 responseJSON 的 JSON 对象开始，调用 .errors 方法，如 responseJSON.errors，以获取错误对象。但是当我像你的示例那样这样做时，即 var response = responseJSON.errors，它只返回一个空字符串。有什么想法吗？ - Andrew

如果你记录或者弹出 JSON.stringify(responseJSON, null, 4)，你会得到一个很好的数据结构视图。你也可以对 responseJSON.errors 进行同样的操作。 - Sean

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。

- Dampsquid

---

说实话，我想写一个返回字符串的函数，这样我就可以轻松地将它整合到各种回调函数中，等等。在那里，我会得到响应对象，并希望将错误消息插入到 DOM 中。 - Andrew

你的想法看起来应该是可行的，但出于某种原因它并不起作用。如果我在返回之前放置 console.log(s)，它会显示 [an empty string]。由于某种原因，在函数中调用时，键和值不愿意转换为字符串... - Andrew

我看到它在fiddle中运行良好，问题在于我不理解响应对象的性质。不幸的是，我的JS知识非常有限，所以我不知道区别在哪里。感谢您的答案和帮助。 - Andrew

Answer 6

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

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

- GolezTrol

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 />' );

- Sirko

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

根据您实现的位置，您可以使用本地数组reduce()函数执行类似操作（请参见MDN文档）。

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

- Horatio Alderaan