Javascript array push not adding value to already defined array

Question

Sorry for this naive question , I am stuck here
I load my filters array from the server

var filters=["Color","Size","Quantity","Ram","Weight","Genre","Stock","Buypacks"];

Now here is the function when I add new filters, my goal is to add new filter value to above array:

function addfilter() {
  var formData = new FormData($("#myform2")[0]);
  var adfilter = $('#filter').val();

  var xhr = new XMLHttpRequest();


  xhr.open('POST', 'performfilterserver.php', true);


  xhr.onload = function() {
    if (xhr.status === 200) {

      alert(xhr.responseText);
      if (xhr.responseText.trim() == "filter added") {

        if (!(filters.includes(adfilter))) {
          filters.push(adfilter); //this never works
          $('#filter').val("");
        }

      }
    } else {
      alert('An error occurred!');
    }
  };

  // Send data
  xhr.send(formData);
}

Here is the corresponding html:

<form id="myform2" method="post" enctype="multipart/form-data">
  <div class="add_filters">

    </select>
    <label style="font-size:20px;"><b>Add filters:</b></label>
    <input type="text" name="filter" id="filter" placeholder="Enter Here" style="border-style:solid;height:30px;" />
    <label>Is this only required once while uploading?</label>
    <input name="imagetf" type="checkbox" value="image" />
    <button name="add_filter" type="button" onclick="addfilter()">ADD filter</button>
    </br>
    </br>
  </div>
</form>

Any help will be appreciated

Edit: I am showing filter values in options through other function , but it shows the orignal array:

$.each(filters, function(key, value) {
  var $option = $("<option/>", {
    value: value,
    text: value
  });
  $sel.append($option);
});

Where and when are you seeing the array not updated? I suspect you're checking the array *before* the update happens. Remember that the XHR will run asynchronously — VLAZ, Oct 17 '20 at 09:18
@VLAZ thanks for your reply , I check by inspect in google chrome — aryanknp, Oct 17 '20 at 09:23
How are you seeing it in the console? Are you sure it's the correct array? I'd suggest putting a `console.log("filters updated", JSON.parse(JSON.stringify(filters)))` after the `filters.push` to see that 1. the code has run 2. the state of the array. It's also possible that some other code updates it and removes an element from it and [because of how the console works](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) you only see the latest state. — VLAZ, Oct 17 '20 at 09:32
@VLAZ you were right this shows that value has been added , but when my other function(show select with options from filters) runs it shows the same orignal array , is the state not getting updated ? — aryanknp, Oct 17 '20 at 09:37

Javascript array push not adding value to already defined array

0 Answers0