通过 json 的 jquery 循环无法按预期工作

Question

我有一个非常简单的 ajax sn-p 序列化烧瓶表单（wtforms）并将其发送到端点。端点验证表单（wtforms 验证）。现在，我需要的只是表单验证时的有效消息，如果没有，则需要一个错误列表。这是我的代码：

@bp_catalogue.route('/catalogue/add_dataset', methods = ['POST'])
@login_required
def add_dataset():
    form = add_dataset_form()

    if form.validate_on_submit():
        return jsonify(success = 'ok!')

    return jsonify(error = form.errors)

此代码按预期工作，如果一切正常，“好的！”我可以在 jquery 中使用 response.success 来使用我希望使用的字符串。如果表单未通过验证，我希望它以类似的格式将错误发送回，并且确实如此。这是响应的样子：

response.error 包含几个错误，例如一条简单的消息，指出空输入需要一个值。我正在寻找遍历这些值并将它们传递给我的 html 中每个表单下的容器。这是我的代码：

$('form').on('submit', function(event) {
    $.ajax({
        data : $('form').serialize(),
        type : 'POST',
        url : '/catalogue/add_dataset'
    }).done(function(response) {
        if (response.hasOwnProperty('success')) {
            $('form')[0].reset();
            $('.response').empty().html(response.success);
        }
        $(response.error).each(function(key, value) {
            console.log(value);
        });
    });
    event.preventDefault();
});

问题是我循环错误的代码没有返回我期望的结果。查看图像，response.error 是对象，具有 2 个元素：dataset_name 和 dataset_description。当我遍历这些时，我希望控制台记录每个错误的实际错误消息，但事实并非如此。

我做错了什么？

Answer 1

您的dataset_description 和dataset_name 的值为arrays，因此您需要遍历该数组以获得所需的值。

演示代码：

var response = {
  "error": {
    "dataset_description": ["something1", "something12"],
    "dataset_name": ["something02", "something13"]

  }

}

//loop through error 
$.each(response.error, function(key, value) {
  console.log(key + " : ") //key 
  //loop through value
  $.each(value, function(index, values) {
    console.log(values); //print value at that key
  })
});

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