Pushing only unique values to array (no repeating values)-CodePudding

I have a dropdown with a button to select all values. The array already has some default values in it, and with a click of a button, all the rest values should be pushed (selected).

I have tried other solutions from SO, but I cannot get it to work.

The values I need to push to another array:

valuesToPush: {
            value1: 'Value 1',
            value2: 'value 2',
            value3: 'Value 3',
            value4: 'Value 4',
            value5: 'Value 5',
        },

The array which I am pushing to is empty initially, so:

pushedValues: [];

On page mount, I push some default values to the array:

pushedValues.push('value1','value2');

How can I add the rest of the values by the key (I need the key for the request, and the value is shown on the page) when I click on the button? I could do it the same way, but more key-value pairs might be added, so I need it to be dynamic.

CodePudding user response：

Try this

const pushedValues = [];
function myFunction() {
  var x = document.getElementById("val").value;
  console.log("You selected: "   x);
  if(!pushedValues.includes(x)){
  pushedValues.push(x);
  console.log(pushedValues);
  }
}

<label for="cars">Choose a value:</label>

<select name="val" id="val" onchange="myFunction()">
  <option value="value1">value 1</option>
  <option value="value2">value 2</option>
  <option value="value3">value 3</option>
  <option value="value4">value 4</option>
  <option value="value5">value 5</option>
</select>

CodePudding user response：

Not sure if you can but you can convert your values to an array of objects and try something like the code below (need to add more work to work on 'deselection' of items but I think this might get you closer to what you are trying to achieve. (I think)

// update values to array of objects
const valuesToPush = [{
    value1: 'Value 1'
  },
  {
    value2: 'value 2'
  },
  {
    value3: 'Value 3'
  },
  {
    value4: 'Value 4'
  },
  {
    value5: 'Value 5'
  },
];

const pushedValues = [];

// push some defaults (keys only)
pushedValues.push('value1', 'value4');
console.log(pushedValues);

function init() {
  var selectObj = document.getElementById("select");

  valuesToPush.forEach(obj => {
    for (const [key, value] of Object.entries(obj)) {
      var newOption = new Option(value, key);    
      
      // mark default as selected
      if (pushedValues.includes(key)) {
        newOption.selected = true;
      }
      
      // add them as options for the select
      selectObj.add(newOption);      
    }
  });
}

function myFunction() {
  var x = document.getElementById("select").value;
  console.log("You selected: "   x);
  console.log(pushedValues);
  if (!pushedValues.includes(x)) {
    pushedValues.push(x);
    console.log(pushedValues);
  }
}

init();

<label for="cars">Choose a value:</label>
<br/>
<select name="val" id="select" multiple onchange="myFunction()"></select>