jquery 遍历 json 没有按预期工作

Question

我有一个非常简单的 ajax 片段，它序列化了一个烧瓶形式 (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)

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

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();
});

问题是我循环检查错误的代码没有 return 我期望的那样。查看图像，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>

jquery 遍历 json 没有按预期工作

jquery loop through json doesn't work as expected

ajax

json

loops

flask

flask-wtforms