將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的函數或其他函數只能返回一個空字符串，這超出了我的范圍。

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格式，並返回一個字符串以允許插入到另一個元素中。 還更新了小提琴。

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文檔 ）。

另外，如有必要，可以將換行符“ \\ n”替換為HTML break元素<br /> 。