Javascript Loop through and Concatenate 2 arrays

Question

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.

dfsq · Accepted Answer · 2017-02-28 13:10:06Z

3

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('|')

answered Feb 28, 2017 at 13:10

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nenad Vracar · Accepted Answer · 2017-02-28 13:11:17Z

1

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)

answered Feb 28, 2017 at 13:11

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 28, 2017 at 13:19

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Comments

Suresh Atta · Accepted Answer · 2017-02-28 13:21:10Z

1

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;

edited Feb 28, 2017 at 13:21

answered Feb 28, 2017 at 13:09

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

3 Comments

Rajesh Dixit Over a year ago

Should array_two[2] be array_two[i]?

Suresh Atta Over a year ago

@Rajesh Ahh, my bad. Corrected. Thankyou

Rajesh Dixit Over a year ago

Another corrrection, you are adding "|" every time. It should not happen for last iteration.

Ousmane D. · Accepted Answer · 2017-02-28 13:30:33Z

0

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;
}

edited Feb 28, 2017 at 13:30

answered Feb 28, 2017 at 13:10

Ousmane D.

56.6k8 gold badges101 silver badges134 bronze badges

1 Comment

Amy Over a year ago

This works perfectly. I just added a result = result.slice(0,-1) to remove the final unused '|' symbol. Thanks for you help.

kind user · Accepted Answer · 2017-02-28 13:10:15Z

0

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

answered Feb 28, 2017 at 13:10

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

niso · Accepted Answer · 2017-02-28 13:29:45Z

-1

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;

edited Feb 28, 2017 at 13:29

answered Feb 28, 2017 at 13:17

niso

1073 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript Loop through and Concatenate 2 arrays

7 Answers 7

Comments

Comments

With for loop

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

With for loop

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related