Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Splice data in array

I'm working on a project on data mapping. Several checks are realized:

  • well imported file

  • table choice

  • columns choice of the table

  • typage of data

I'm for at the part of the choice of columns for the moment. I'm stocking these various choices in an array. The problem is that if I want to delete one choice in my array, all data are deleted ! I'm using this plugin: http://wenzhixin.net.cn/p/multiple-select/docs/

var choiceFields = [];                  
$('#selectFields').multipleSelect({
    filter: true,
    onClick: function(view) 
    {
        choiceFields.push(view.value);
        var length = choiceFields.length-1;
        if(view.checked === false)
        {
            choiceFields.splice(view.value);
        }
        console.log(choiceFields);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
    <label for="selectFields"><span class="label-FieldChoice">Choice fields</span>  </label>
    <select id="selectFields" multiple="multiple" style="display: none;">
        <option value="id">id</option>
        <option value="username">username</option>
        <option value="username_canonical">username_canonical</option>
        <option value="email">email</option>
        <option value="email_canonical">email_canonical</option>
        <option value="enabled">enabled</option>
        <option value="salt">salt</option>
        <option value="password">password</option>
        <option value="last_login">last_login</option>
        <option value="confirmation_token">confirmation_token</option>
        <option value="password_requested_at">password_requested_at</option>
        <option value="roles">roles</option>
        <option value="lastName">lastName</option>
        <option value="firstName">firstName</option>
    </select>
    
</div>
like image 231
Maestro Avatar asked Oct 15 '18 06:10

Maestro


People also ask

How do you splice an element from an array?

Find the index of the array element you want to remove using indexOf , and then remove that index with splice . The splice() method changes the contents of an array by removing existing elements and/or adding new elements. The second parameter of splice is the number of elements to remove.

Why is splice not working on array?

It's not working because you are removing items from the array while looping through the keys. When you remove an item, it will rearrange the other items depending on how the array is implemented internally, and you end up with a loop that doesn't iterate over the keys that you expect.

Can you use slice on array?

Using slice() to convert array-like objects to arrays The slice() method is often used with bind() and call() to create a utility method that converts an array-like object into an array.

Does splice affect the array?

slice returns a piece of the array but it doesn't affect the original array. splice changes the original array by removing, replacing, or adding values and returns the affected values.


2 Answers

You can do it like this:

var choiceFields = [];
$('#selectFields').multipleSelect({
  filter: true,
  onClick: function(view) {
    choiceFields.push(view.value);
    var length = choiceFields.length - 1;
    if (view.checked === false) {
      choiceFields = jQuery.grep(choiceFields, function(value) {
        return value != view.value;
      });
    }
    console.log(choiceFields);
  }
});

I've changed:

choiceFields.splice(view.value);

to:

choiceFields = jQuery.grep(choiceFields, function(value) {
  return value != view.value;
});

Demo

var choiceFields = [];
$('#selectFields').multipleSelect({
  filter: true,
  onClick: function(view) {
    choiceFields.push(view.value);
    var length = choiceFields.length - 1;
    if (view.checked === false) {
      choiceFields = jQuery.grep(choiceFields, function(value) {
        return value != view.value;
      });
    }
    console.log(choiceFields);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet" />
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
  <label for="selectFields"><span class="label-FieldChoice">Choice fields</span>  </label>
  <select id="selectFields" multiple="multiple" style="display: none;">
    <option value="id">id</option>
    <option value="username">username</option>
    <option value="username_canonical">username_canonical</option>
    <option value="email">email</option>
    <option value="email_canonical">email_canonical</option>
    <option value="enabled">enabled</option>
    <option value="salt">salt</option>
    <option value="password">password</option>
    <option value="last_login">last_login</option>
    <option value="confirmation_token">confirmation_token</option>
    <option value="password_requested_at">password_requested_at</option>
    <option value="roles">roles</option>
    <option value="lastName">lastName</option>
    <option value="firstName">firstName</option>
  </select>

</div>
like image 53
Carsten Løvbo Andersen Avatar answered Oct 10 '22 05:10

Carsten Løvbo Andersen


In Array.splice() it takes 3 parameters array.splice(index, howMany, [element1][, ..., elementN]) .

index − Index at which to start changing the array.

howMany − An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed.

element1, ..., elementN − The elements to add to the array. If you don't specify any elements, splice simply removes the elements from the array.

But you had'nt provied howMany parameter in your answer provide this value to delete particular index from array

ex -

var choiceFields = [];                  
$('#selectFields').multipleSelect({
filter: true,
onClick: function(view) 
{
   
    var length = choiceFields.length-1;
    if(view.checked === false)
    {
        var index = choiceFields.indexOf(view.value);  // Finding Index of Item

        choiceFields.splice(index,1);   // Splicing one element from index
    }
    else{
     choiceFields.push(view.value);  // if false we do not push value
    }
    console.log(choiceFields);
},

onCheckAll: function() 
{
     
     
     choiceFields = [];    // delete all previous values
     var options = document.getElementById('selectFields');
     for(var i=0;i<options.length;i++){
        choiceFields.push(options[i].text);
     }
   
   console.log(choiceFields);

}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
    <label for="selectFields"><span class="label-FieldChoice">Choice fields</span>  </label>
    <select id="selectFields" multiple="multiple" style="display: none;">
        <option value="id">id</option>
        <option value="username">username</option>
        <option value="username_canonical">username_canonical</option>
        <option value="email">email</option>
        <option value="email_canonical">email_canonical</option>
        <option value="enabled">enabled</option>
        <option value="salt">salt</option>
        <option value="password">password</option>
        <option value="last_login">last_login</option>
        <option value="confirmation_token">confirmation_token</option>
        <option value="password_requested_at">password_requested_at</option>
        <option value="roles">roles</option>
        <option value="lastName">lastName</option>
        <option value="firstName">firstName</option>
    </select>
    
</div>
like image 32
Amit chauhan Avatar answered Oct 10 '22 05:10

Amit chauhan