如何遍历错误数组？

Question

我正在尝试验证提交时的表单字段。我成功地在数组中获取以下JSON错误验证消息。但是我该如何循环浏览，以便每个错误都显示在相应字段的下方？

错误返回json：

{
  "data": {
    "error": {
      "first_name": "First name is required",
      "last_name": "Last name is required",
      "email":"Email is required",
      "phone":"Phone is required"
    }
  }
}

$.ajax({
  url: '<?php echo $this->CxHelper->Route('
  eb - front - validate - evaluation - quiz - client - details '); ?>',
  type: 'POST',
  data: $('#signup-form').serialize(),
  dataType: 'JSON',
  success: function(data) {
    if (data.status == 'success') {
      console.log(data.status);
    }
  },
  error: function(data) {
    console.log(data.responseText);

    // i want to loop here so that each error is shown
    // below respective field
    $('.error-box').html(data.responseText);
  }
});

<div class='content'>
  <div class="top-title">Body Evaluation</div>
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12 evaluation-quiz-user-detail-div left-side-border-right">
      <div class="error-box"></div>
      <div class="row">
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("first_name")}}</label>
          <label class="input">
           {{ EvaluationClientFrontEndForm.render("first_name", ["class": "form-control"]) }}
          </label>
        </section>
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("last_name")}}</label>
          <label class="input">
           {{ EvaluationClientFrontEndForm.render("last_name", ["class": "form-control"]) }}
         </label>
        </section>
      </div>
      <div class="row">
        <section class="col-md-12">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("email")}}</label>
          <label class="input make-me-block">
            {{ EvaluationClientFrontEndForm.render("email", ["class": "form-control"]) }}
           </label>
        </section>
      </div>
      <div class="row">
        <section class="col-md-12">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("phone")}}</label>
          <label class="input make-me-block">
            {{ EvaluationClientFrontEndForm.render("phone", ["class": "form-control"]) }}
          </label>
        </section>
      </div>

      <div class="row">
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("age")}}</label>
          <label class="input">
            {{ EvaluationClientFrontEndForm.render("age", ["class": "form-control"]) }}
          </label>
        </section>
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("gender")}}</label><br>
          <input type="radio" name="gender" value="male"> Male
          <input type="radio" name="gender" value="female"> Female<br>
        </section>
      </div>
      <div class="row">
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("current_weight")}}</label>
          <label class="input">
            {{ EvaluationClientFrontEndForm.render("current_weight", ["class": "form-control"]) }}
          </label>
        </section>
        <section class="col-md-6">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("goal_weight")}}</label>
          <label class="input">
            {{ EvaluationClientFrontEndForm.render("goal_weight", ["class": "form-control"]) }}
          </label>
        </section>
      </div>
      <div class="row">
        <section class="col-md-12">
          <label class="label">{{EvaluationClientFrontEndForm.getLabel("skype_id")}}</label>
          <label class="input make-me-block">
            {{ EvaluationClientFrontEndForm.render("skype_id", ["class": "form-control"]) }}
          </label>
        </section>
      </div>
    </div>

现在，我在div框中显示这样的错误：

请让我知道是否需要进一步的详细信息。

谢谢