Double the fun: JavaScript array appears twice!

Question

Double the fun: JavaScript array appears twice!

I am currently working on displaying the selected filters from checkboxes. Initially, I create an array containing the values selected from the checkboxes and then aim to add them to a string.

Suppose I have two checkboxes labeled: label1 and label2, my array looks like this: ['label1','label2'].

The expected outcome should be "Filtered by: Label1, Label2" but instead, I end up with

Filtered by: Label1,Label2, Label1,Label2

I believe the issue lies within the for loop where I construct the string, as the array appears correct

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

If you'd like to see the problem in action, check out this pen: https://codepen.io/anon/pen/pqjYxL

javascript arrays

Answer 1

Answer №1

In order to retrieve specific elements, you should utilize the index.

When you don't use an index, you end up assigning the entire array.

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

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

Answer 2

In order to retrieve specific elements, you should utilize the index.

When you don't use an index, you end up assigning the entire array.

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

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

Answer 3

Answer №2

Make sure to access a specific element by its index.

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

An alternative, more concise approach is to utilize the join method.

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

Answer 4

Make sure to access a specific element by its index.

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

An alternative, more concise approach is to utilize the join method.

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

Double the fun: JavaScript array appears twice!

Answer №1

Answer №2

Similar questions

JavaScript capable of storing vast quantities of data

The components declared in the index file are rendered on every route throughout the React application

Is it possible to include a value for the "src" attribute rather than the "class" attribute in the array of values in list.js?

Error: There was a syntax issue when trying to parse JSON due to an unexpected identifier "object" in the anonymous function

Disabling the visibility of elements through a transparent sticky-top menu

Creating a JavaScript function to download specific sections of an HTML page

Creating Dynamic Components in ReactJS with Conditional Rendering

Trouble with radio button selection in Pyppeteer, puppeteer, and Angular JS

Edit esri pop-up template

Is it possible to modify variables in the controller when the route is changed?

Dealing with cross-origin error issues when using json.parse in React / MERN development

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Tips for avoiding the display of concealed forms on a webpage

Unable to access a text file while executing a javascript file as a systemd service

What is the extent of an object within a JavaScript Array?

Combining arrays of objects that contain nested arrays of objects using JavaScript along with libraries such as lodash or Underscore

Animating nested ng-repeat loops

Why isn't my SCO considered complete?

Activate a change or response when the input value in Javascript is altered

Using jquery, transform json data into html table format