JSONハッシュを人間が読める文字列に変換する

Question

何か問題が生じた場合にエラーを含むjsonハッシュを返すAjax呼び出しがあります。ここでは例です：

this questionに基づいて

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

私はそうのように、私はこのハッシュの一部を印刷することができることを把握することができた：{"image":["file must be at least 1024x768px in size."]}：

JSON.stringify(responseJSON.errors) 

は、しかし、これはまだのように、コードのハッシュとして出力します

私は本当に単純にこれを変換したい：

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の機能や他の人のいずれかを使用してのみ、空の文字列を返すのはなぜ私を超えています。あなたのJSONに基づいて

Answer 1

：var myStr = "Image " + responseJSON.errors.image[0];

あなたはすべてのエラーを取得したいと、複数のそのになる場合：

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

Answer 2

あなたがそうのようなエラーを反復処理することができます。

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

エラーメッセージをどのように表示するかわかりませんので、あらかじめお知らせします。しかし、これはJSONオブジェクトから必要な情報を得るのに十分なはずです。

Answer 3

エラーを繰り返し処理し、要素に追加します。

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

Answer 4

JSONレスポンスは実際にはオブジェクトなので、そのプロパティを読み取ることができます。 responseJSON.errorsと同じように、responseJSON.errors.image[0]を読むと、JSONレスポンスのerrorsサブオブジェクトのイメージ配列の最初の項目を読み取ることができます。

Answer 5

オブジェクトを文字列にして後で文字列メソッドを適用するのではなく、オブジェクトをループオーバーする方がよい場合があります。

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 6

このタイプのタスクでは、すばらしいunderscore.jsライブラリを使用する傾向があります。（あなたはこれを実装している場所、あなたはネイティブ配列reduce()機能に似た何かができるによって

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

：これは、のようなものを返します

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

：次に、あなたは、次のような何かを行うことができますMDN documentationを参照）。

また、必要に応じて、改行「\ n」をHTML改行要素<br />に置き換えることもできます。

Answer 7

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 8

相続人は、単純な純粋な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の書式設定を追加し、別の要素の中に挿入できるように文字列を返すように更新

。フィドルも更新されました。