$.each() Uncaught ReferenceError: i is not defined

Question

I'm getting a reference error. I'm retrieving json data via ajax. I'm able to post all the data to my console so I know the json object is properly formatted. I'm attempting to loop through the errors array inside the object and manipulate the data accordingly for form validation.

However, the loop itself isn't working and I'm not sure what I'm doing wrong.

$(".contact-form").submit(function(e) {
      e.preventDefault();

    var url = $(this).attr("action");
    var data = $(this).serialize();

    $.getJSON(url, data, function(response){

      console.log(response);
      console.log(response.errors[0].field);
      console.log(response.errors[1].field);
      console.log(response.errors[0].message);
      console.log(response.errors[1].message);

      var msg = "<h2>" + response.status[0].message + "</h2>";

       $(".outputMsg").replaceWith(msg);
//WHERE ERROR IS OCCURING
        $.each(response.errors[i],function(i,val){

         var elm = $("#"+response.errors[i].field);
         elm.css('border-color','red');
         var elm2 = elm.parent().find('.help-block');
         elm2.html(response.errors[i].message);
         elm2.show();

       });

     });
     return false;
  });

Answer 1 · 2017-02-14T04:40:13Z

February 14, 2017 4:40am

jQuery's each method accepts an object and a callback. The callback is scoping the i variable, so it will not be available outside of that function. Maybe you could try this:

$.each(response.errors, function(i, val){
         var elm = $("#"+val[i].field);
         elm.css('border-color','red');
         var elm2 = elm.parent().find('.help-block');
         elm2.html(val[i].message);
         elm2.show();
});

You can also check out the documentation here.

Answer 2 · 2017-02-14T01:17:08Z

February 14, 2017 1:17am

You haven't defined "i" yet, but you are using it as an index.

The variable "i" is only available inside the anonymous function. But since the $.each function is expecting an array, perhaps you didn't mean to subscript response.errors there at all?

Perhaps you meant to do this:

        $.each(response.errors, function(i, val) {

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Greco

Joseph Greco

$.each() Uncaught ReferenceError: i is not defined

2 Answers

Jose Soto

Jose Soto

Steven Parker

Steven Parker

You haven't defined "i" yet, but you are using it as an index.