Loop through and compare javascript objects

Question

I have two arrays which are created from the inputs of a user like so:

var impArray = [];
$('[id^=imp]').on('change', function(){
    var value = $(this).val();
    var name = ($(this).attr('name').replace('imp-',''))
    impArray[name] = value;
    console.log(impArray);
})

var assessArray= [];
$('[id^=assess]').on('change', function(){
    var value = $(this).val();
    var name = ($(this).attr('name').replace('assess-',''))
    assessArray[name] = value;
    console.log(assessArray);
})

These create arrays like

assessAray
    1-1: 10
    1-2: 15
    1-3: 9

impArray
    1-1: 6
    1-2: 14
    1-3: 2

I then need to do a simple calculation with the matching keys like:

$('#comp-1-1').val(impArray['1-1'] / assessArray['1-1'] * 100);

Obviously I can't do this with every single one, so,

Question: How can I loop through the arrays and compare them based on keys then do something with their values?

Answer 1

If both arrays will always be the same length and have the object property at the same index, this should work:

http://jsfiddle.net/9DBuD/

assessArray = [{'1-1':'10'},{'1-2':'15'},{'1-3':'9'}];
impArray = [{'1-1':'6'},{'1-2':'14'},{'1-3':'2'}];

for(var i=0;i<assessArray.length;i++){
    for(var prop in assessArray[i]){
        for(var property in impArray[i]){
            if(prop == property){
                $('#comp-'+prop).val(impArray[i][property]/assessArray[i][prop]*100)
            }
        }
    }
}

Edit

This modified fiddle and code should produce the same results even if the array indexes and sizes do not match:

http://jsfiddle.net/9DBuD/1/

Array.prototype.indexOfProp = function (property) {
    for (var i = 0, len = this.length; i < len; i++) {
        if (this[i][property]!=undefined) return i;
    }
    return -1;
}

assessArray = [{'1-2':'15'},{'1-3':'9'},{'1-1':'10'},{'1-4':'10'}];
impArray = [{'1-1':'6'},{'1-3':'2'},{'1-2':'14'}];


for(var i=0;i<assessArray.length;i++){
    for(var prop in assessArray[i]){
        var index = impArray.indexOfProp(prop)
        if(index!=-1){
             $('#comp-'+prop).val(impArray[index][prop]/assessArray[i][prop]*100)   
        }
    }
}

Answer 2

Technically, you are working with JavaScript objects, not arrays. Your variable declarations should actually be:

var impArray = {};
var assessArray = {};

Once you have the correct variable declarations, you can use jQuery.each to iterate through keys (not indexes):

$.each(impArray, function(key, value){
  $('#comp-'+key).val(assessArray[key]/value*100);
});

Answer 3

Does this help you?

$.each(impArray, function(index, value){
  var result = assessArray[index] / value * 100;
  $('#comp-1-'+index).val(result);
});

Answer 4

Try using $.each() , like:

$.each(impArray, function(i, v){
  $('#comp-'+i).val(v/assessArray[i]*100);
});