problems with for loop inside another for loop Javascript

Question

I have problems in going through these two for loops, I need to get the same elements from the first array within the cycle, but the values ​​are being repeated. I know that they are repeated depending on the data of the second array.

I tried to make comparisons but I could not get the result I want.

 var array = [ { grouper: 1 }, { grouper: 2 }, { grouper: 3 }, { grouper: 4 }, ]; var array2 = [ { value: 1, grouper: 1, status: 100 }, { value: 2, grouper: 2, status: 100 }, { value: 3, grouper: 3, status: 100 } ]; for(var i = 0; i<array.length; i++){ for(var j = 0; j<array2.length; j++){ if(array2[j].grouper == array[i].grouper){ console.log(array[i].grouper+'-'+array2[j].value); } } } 

This is the result I want, I need all the groupers from the first array and the values from the second array:

1-1
2-2
3-3
4-

The grouper 4, does not have value, but I need to show it.

I need the second array because I'm going to compare with the data from the second array

I do not know if I am doing the process wrong. I hope you can help me.

Answer 1

First of all, with the example you provided I believe you want to get back:

1,2,3

There is no 4th object inside of array2, so your conditional (array2[j].grouper == array[i].grouper will never evaluate to true.

The question here is whether you are always comparing the same indexes? In this example, you're comparing array[0] to array2[0] to see if grouper in array equals grouper in array2... that's it????

In that case you just do one loop:

for (var i = 0; i < array.length; i++) {
      if (array[i].grouper == array2[i].grouper) {
        console.log(array[i].grouper+'-'+array2[j].value);
      }
}

Answer 2

You could simply track if there was a match (variable shown ), and if there were not any, display a "half" line:

 var array = [{grouper: 1},{grouper: 2},{grouper: 3},{grouper: 4},]; var array2 = [ {value: 1, grouper: 1, status: 100}, {value: 2, grouper: 2, status: 100}, {value: 3, grouper: 3, status: 100} ]; for(var i = 0; i<array.length; i++){ var shown=false; for(var j = 0; j<array2.length; j++){ if(array2[j].grouper == array[i].grouper){ console.log(array[i].grouper+'-'+array2[j].value); shown=true; } } if(!shown){ console.log(array[i].grouper+"-"); } } 

Answer 3

@FabianSierra ... with your provided example one just needs to handle the not fulfilled if clause/condition in the most inner loop.

A more generic approach additionally might take into account changing field names (keys). Thus a function and Array.reduce / Array.find based approach provides better code reuse. An example implementation then might look similar to that ...

 var array = [{ // in order. grouper: 1 }, { grouper: 2 }, { grouper: 3 }, { grouper: 4 }]; var array2 = [{ // not in the order similar to `array`. value: 22, grouper: 2, status: 200 }, { value: 33, grouper: 3, status: 300 }, { value: 11, grouper: 1, status: 100 }]; function collectRelatedItemValuesByKeys(collector, item) { var sourceKey = collector.sourceKey; var targetKey = collector.targetKey; var targetList = collector.targetList; var resultList = collector.result; var sourceValue = item[sourceKey]; var targetValue; var relatedItem = targetList.find(function (targetItem) { return (targetItem[sourceKey] === sourceValue); }); if (typeof relatedItem !== 'undefined') { targetValue = relatedItem[targetKey]; } else if (typeof targetValue === 'undefined') { targetValue = ''; // `relatedItem` does not exist. } resultList.push([sourceValue, targetValue].join('-')); return collector; } var resultList = array.reduce(collectRelatedItemValuesByKeys, { sourceKey: 'grouper', targetKey: 'value', targetList: array2, result: [] }).result; console.log('resultList : ', resultList); resultList = array.reduce(collectRelatedItemValuesByKeys, { sourceKey: 'grouper', targetKey: 'status', targetList: array2, result: [] }).result; console.log('resultList : ', resultList); 

 .as-console-wrapper { max-height: 100%!important; top: 0; }