Преобразовать хэш 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.

Если не использовать .replace после stringify, есть ли простой способ сделать это? Обратите внимание, что хэш ошибок может содержать больше ошибок, например:

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

---

Обновление: Я не знаю почему, но ни одна из функций, показанных ниже, не будет возвращать строку при передаче объекта responseJSON. Тем не менее, добавление непосредственно в DOM с помощью jQuery сработало. Вот что я в итоге сделал:

// 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

Перебрать ошибки и добавить их к элементу.

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

Answer 2

Вы можете перебирать ошибки следующим образом:

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

Не знаете, как вы хотите отображать сообщения об ошибках, поэтому я оставлю это на ваше усмотрение.Но этого должно быть достаточно, чтобы получить необходимую информацию из вашего объекта JSON.

Answer 3

Вот простое чистое решение 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;
}                                                                 

Edit:

Обновлено, чтобы добавить простое форматирование CSS и вернуть строку, чтобы разрешить вставку в другой элемент. Также обновлена ​​скрипка.

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

На основе вашего JSON: var myStr = "Image " + responseJSON.errors.image[0];

Если вы хотите получить все ошибки и их будет более одного:

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

Answer 6

Для этого типа задач я использую удивительную библиотеку 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 <br />, если необходимо.

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

Ответ JSON на самом деле является объектом, поэтому вы можете просто прочитать его свойство.Также как вы можете прочитать responseJSON.errors, вы также можете прочитать responseJSON.errors.image[0], чтобы прочитать первый элемент массива изображения в подобъекте ошибок JSON-ответа.