Javascript array displays twice

Question

I'm trying to show the filters selected from a checkbox. First I'm creating an array of values selected from the checkboxes and I'm trying to append to a string

For example I have two checkboxes labeled: label1 and label2, I built the array ['label1','label2'].

The desired result would be "Filtered by: Label1, Label2" but instead I get Filtered by: Label1,Label2, Label1,Label2

I guess it's something in the for loop where I'm trying to build the string, because the array looks fine

let topLabel = jQuery('.industry-filter').data('selected-text') + ' ';
let termsName= ['Industry', 'Category']
if(termsName.length){
  for(var j = 0; j < termsName.length; j++){
    if(j == termsName.length - 1){
      topLabel += termsName;
    }else{
      topLabel += termsName+', ';
    }
  }
}else{
  topLabel = jQuery('.industry-filter').data('text');
}

$('.industry-filter').text(topLabel);

Here is a pen that shows the issue: https://codepen.io/anon/pen/pqjYxL

You forgot to access the array element using the index if(j == termsName.length - 1){ topLabel += termsName[j]; }else{ topLabel += termsName[j]+', '; } — Hassan Imam
– Hassan Imam, Commented Dec 13, 2018 at 9:46
how about use join instead termsName.join(", ", termsName) you're just making your code complicated — Beginner
– Beginner, Commented Dec 13, 2018 at 9:48

Code Maniac · Accepted Answer · 2018-12-13 09:47:29Z

1

You need to access by index.

Without using index you're assigning the complete array.

let topLabel = jQuery('.industry-filter').data('selected-text') + ' ';
let termsName= ['Industry', 'Category']
if(termsName.length){
  for(var j = 0; j < termsName.length; j++){
    if(j == termsName.length - 1){
      topLabel += termsName[j];
                           ^^^
    }else{
      topLabel += termsName[j] +', ';
                           ^^^
    }
  }
}else{
  topLabel = jQuery('.industry-filter').data('text');
}

$('.industry-filter').text(topLabel);

answered Dec 13, 2018 at 9:47

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2018-12-13 09:56:49Z

0

You should access one element by its index.

if(j == termsName.length - 1){
  topLabel += termsName[j];
}else{
  topLabel += termsName[j]+', ';
}

One short version of your solution could be using join method.

if(termsName.length){
   topLabel += termsName.join(',')
}

edited Dec 13, 2018 at 9:56

answered Dec 13, 2018 at 9:44

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Collectives™ on Stack Overflow

Javascript array displays twice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related