javascript - 处理 Ajax 中的错误返回未定义

Question

我试图在 Ajax 不成功时显示错误，但我无法深入研究结果以显示确切的错误。

样本

这是我在网络选项卡 playground 中得到的内容

{"message":"The given data was invalid.","errors":{"title":["The title field is required."],"slug":["The slug field is required."]}}

和JSON

message The given data was invalid.
errors  {…}
title   […]
0   The title field is required.
slug    […]
0   The slug field is required.

控制台

message
The given data was invalid.
errors
{…}
slug: Array [ "The slug field is required." ]
title: Array [ "The title field is required." ]
<prototype>: Object { … }

在我看来我能得到的是:

message - The given data was invalid.
errors - [object Object]

代码

error:function(data){
    if( data.status === 422 ) {
        var errors = data.responseJSON;
        errorsHtml = '<div class="alert alert-danger"><ul>';
        $.each( errors , function( key, value ) {
            console.log(key);
            console.log(value);
            errorsHtml += '<li><b>' + key + '</b> - ' + value + '</li>';
        });
        errorsHtml += '</ul></div>';
        $( '#form-errors' ).html( errorsHtml );
    } else if( data.status === 500 ){
        var errors = data.responseJSON;
        $( '#form-errors' ).append(errors.message);
    } else {
        var errors = data.responseJSON;
        $( '#form-errors' ).append(errors.message);
    }
}

我想要什么

我想从 errors 部分获取 key 和 value。

问题

根据我上面的代码，如果我第二次循环我的 value，例如:

//basic
$.each( errors , function( key, value ) {
  //second time loop to get into errors
  $.each( value , function( df, er ) {
    console.log(df);
    console.log(er);
  });
  errorsHtml += '<li><b>' + key + '</b> - ' + value + '</li>';
});

这行不通。

问题

我怎样才能得到我的错误部分并返回那些键和值？

Answer 1

您从 data.responseJSON 分配的 errors 变量包含您在 playground 中看到的值。

{"message":"The given data was invalid.","errors":{"title":["The title field is required."],"slug":["The slug field is required."]}}

可以遍历这个对象，直接访问对象的errors属性。查看下面我在哪里使用 $.each(errors.errors,//... 直接访问该属性。根据我的一些假设，您应该能够执行以下操作:

// mocking the data object for this example
var data = {responseJSON: {"message":"The given data was invalid.","errors":{"title":["The title field is required."],"slug":["The slug field is required."]}}};

var errors = data.responseJSON;
errorsHtml = '<div class="alert alert-danger"><ul>';

$.each(errors.errors , function( key, value ) {
    errorsHtml += '<li><b>' + key + '</b> - ' + value[0] + '</li>';
});

errorsHtml += '</ul></div>';
$('#form-errors').html(errorsHtml);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="form-errors"></div>