How to show message in for-loop issues in javascript or using jquery

问题

I tried this for almost two days but still nothing. Maybe someone can help who is highly skilled in javascript loops.

I have this code:

$(function(){
 var len = $('#groupContainer > div').length;
 var arr = [];
 for(var i=0; i < len; i++){

    var number = $('#number_' + [i + 1]);
    var date = $('#date_' + [i + 1]);
    var count = i + 1;
    var message ="";
    console.log(number)

    var a = number.map(function(){
        return this.value;
    });

    var b = date.map(function(){
        return this.value;
    });

    var newObj = {number: a[0], date: b[0]}
    arr.push(newObj);

}

var message = "";
 for(var c = 0; c < arr.length; c++)
 {        


    for(var d in arr[c])
    {
        message += 'Group: ' + [c + 1] + '\n';
        if(arr[c].hasOwnProperty(d))
        {      
            if(arr[c][d] == "")
            {

                message +=  d + ' is required!\n';
            }

        }
        message = message + "\n";
    }


 }
 alert(message);
});

And the expected output:

If all the fields in group 1 is filled and group 2 is not show alertbox:

   Group 2:
   Number is required!
   Date is required!

If all field is not filled show:

   Group 1, 2 Number is required!
   Group 1, 2 Date is required!

If all field is filled do nothing.

Here's my FIDDLE

回答1:

Your code here is too much complicated and should be simplified.

You need to save the messages in an object and loop through them later to show the messages in order.

var messages = {};
var message = "";

for(var c = 0; c < arr.length; c++)
{        
    var groupMessage = false;
    for(var d in arr[c])
    {

        if(arr[c].hasOwnProperty(d))
        {      
            if(arr[c][d] == "")
            {
                if(messages[d]==undefined) {
                    messages[d]={groups:[]};
                }
                messages[d].groups.push(c+1);
            }

        }            
    }

    var lastgroup = "";

    for(i in messages) {
      m = messages[i];      
      if(m.groups.join(",")==lastgroup) {
        message = message.replace("Group "+m.groups.join(",")+" ","Group "+m.groups.join(",")+":\n");
        message+=i+" is required!\n";
      }
      else {
          message+="Group "+m.groups.join(",")+" "+i+" is required!\n";
      }
      lastgroup = m.groups.join(",");
    }

  // .....
}

回答2:

$(function(){
    var len = $('#groupContainer > div').length;
 	var arr = [];
    for(var i=0; i < len; i++){

        var number = $('#number_' + [i + 1]);
        var date = $('#date_' + [i + 1]);
        var count = i + 1;
        var message ="";
        var a = number.map(function(){
            return this.value;
        });
        var b = date.map(function(){
            return this.value;
        });
        
        var newObj = {number: a[0], date: b[0]}
		arr.push(newObj);
    }
   console.log(arr);
    var message = "";
    for(var c = 0; c < arr.length; c++)
    {        
        haveErrorInGroup = false;
        for(var d in arr[c])
        {
            if(arr[c].hasOwnProperty(d))
            {      
                if(arr[c][d] == "")
                {
                    if(!haveErrorInGroup){
                        haveErrorInGroup= true;
                       message += 'Group: ' + [c + 1] + '\n';
                    }
                       
                    message +=  d + ' is required!\n';
                }
                
            }
            
        }
        
        
    }
    alert(message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupContainer">
    <div id ="profileGroup1">
        <div class="item">
            Number1: <input type="text" id="number_1" value="20">
        </div>
        <div class="item">
           Date1: <input type="text" id="date_1" value="">
        </div>
    </div>
    <div id ="profileGroup2">
        <div class="item">
            Number2: <input type="text" id="number_2" value="2015-05-05">
        </div>
        <div class="item">
            Date2: <input type="text" id="date_2" value="">
        </div>
    </div>
</div>

来源：https://stackoverflow.com/questions/33031166/how-to-show-message-in-for-loop-issues-in-javascript-or-using-jquery