I am trying to loop through and concatenate 2 arrays such as below, I don’t know how many values there will be as a user could purchase 1 or 100 products so it needs to loop.

Array1 = ['ABC', 'DEF', 'GHI']

Array2 = ['123', '45', '6789',]

I need to output to be:

ABC:123|DEF:45|GHI:6789

Currently code I have...

function() {
  var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
  var array_two = ['179.99', '349.99', '399.99', '389'];
  for (var i = 0; i < array_one.length; i++) {
    for (var j = 0; j < array_two.length; j++) {
      return(array_one[i] + ":" + array_two[j] + "|");
    }
  }
}

This only outputs one value and doesn't loop through, any ideas where my loop is breaking.

I am trying to loop through and concatenate 2 arrays such as below, I don’t know how many values there will be as a user could purchase 1 or 100 products so it needs to loop.

Array1 = ['ABC', 'DEF', 'GHI']

Array2 = ['123', '45', '6789',]

I need to output to be:

ABC:123|DEF:45|GHI:6789

Currently code I have...

function() {
  var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
  var array_two = ['179.99', '349.99', '399.99', '389'];
  for (var i = 0; i < array_one.length; i++) {
    for (var j = 0; j < array_two.length; j++) {
      return(array_one[i] + ":" + array_two[j] + "|");
    }
  }
}

This only outputs one value and doesn't loop through, any ideas where my loop is breaking.

• javascript
• loops
• for-loop

7 Answers 7

If you know that both arrays have the same length then simple map would be enough:

var array1 = ['ABC', 'DEF', 'GHI']
var array2 = ['123', '45', '6789']

var result = array1.map(function(item, index) {
  return item + ':' + array2[index]
}).join('|')

console.log(result)

Or a ES2015 version:

var result = array1.map((item, index) => `${item}:${array2[index]}`).join('|')

You can use map() to add elements from array_two and then join() to create string.

var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
var array_two = ['179.99', '349.99', '399.99', '389'];

var result = array_one.map(function(e, i) {
  return e + ':' + array_two[i]
}).join('|')

console.log(result)

You can use Array.reduce

var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
var array_two = ['179.99', '349.99', '399.99', '389'];

var result = array_one.reduce(function(p, c, i, a) {
  p += c + ":" + array_two[i]
  if (i < a.length - 1)
    p+="|"
  return p;
}, "")

console.log(result)

With for loop

var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
var array_two = ['179.99', '349.99', '399.99', '389'];

var result = "";
for(var i = 0; i< array_one.length; i++){
  result += array_one[i] + ":" + array_two[i]
  if (i < array_one.length - 1)
    result += "|"
}
console.log(result)

Your logic is little wrong, you don't really need two loops. With one loop you can do it and you shouldn't return inside the loop.

Since they are of the same size, below code should do

var result="";
for (var i = 0; i < array_one.length; i++) {     
     result += (array_one[i] + ":" + array_two[i] + "|");    
}
return result;

This only outputs one value and doesn't loop through, any ideas where my loop is breaking.

what is the cause ?

It's only returning one value because you're using the return keyword within the first iteration hence it will exit within the first iteration.

where does the error occur ?

the code below is where your loop is breaking:

 return(array_one[i] + ":" + array_two[j] + "|");

How to resolve the issue ?

Note : you don't actually need a nested loop in this case because both arrays have the same length so we can simplify it.

in order to improve your current solution we can make a string variable and append the result there such as:

function() {
  var array_one = ['ABC', 'DEF', 'GHI', 'JKL'];
  var array_two = ['179.99', '349.99', '399.99', '389'];
  var result = "";
  for (var i = 0; i < array_one.length; i++) {
     result += array_one[i] + ":" + array_two[i] + "|";
  }
  return result;
}

var arr1 = ['ABC', 'DEF', 'GHI'],
    arr2 = ['123', '45', '6789'],
    result = '';
    
    //iterate over every element from arr1 and add it into the 
    //result string with corresponding value from arr2
    arr1.forEach((v,i) => result += v + ':' + arr2[i] + '|'); 
    console.log(result.slice(0, -1)); //cut the `|` sign from the end of the string

Just one 'for loop' is enough for the output you want

     var  returnValue = "";
     for (var i = 0; i < array_one.length; i++)
        {
        returnValue+ =array_one[i] + ":" + array_two[j] + "|";
        }
     return  returnValue;