I have the following HTML/JS where I parse DOM elements and try to find the missing ones and delete them. However, it says: includes() is not a function. When I execute this, I get type Object for newHTML and newHTMLO (newHTMLO is just a experimental variable). I tried Array.from() and Object.valueOf(), both producing the same result.

Can someone help me to get this working?

var deleteLinks = $(".remove-button .remove-from-cart");
console.log("registered: " + deleteLinks.length);
deleteLinks.on('click', function(ev){
    ev.preventDefault();
    console.log("registered: " + deleteLinks);
    var currentHTML = $('.product');
    var currentText = $('.product .product-details .name-header');  
    var newHTML ;
    var deleteIndices = [];
        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              newHTMLO = $(data).find('.product .product-details .name-header').map(function() { return this.innerText.toUpperCase(); });   
              newHTML = Object.values(newHTMLO);
              for(i = 0; i  < newHTML.length; i++){
                  console.log(i);
                  console.log(newHTML[i]);
                  console.log(typeof newHTML);
                  console.log(typeof newHTMLO);
                  if (!(newHTML.includes(currentText[i].innerText.toUpperCase()))) {
                console.log("found mismatch for index " + i);
                deleteIndices.push(i);
                  }
              }
          }
    });

   for(i = 0; i < deleteIndices.length; i++) {
    console.log("removing " + deleteIndices[i]);
    currentHTML[deleteIndices[i]].remove();
}
});

I have the following HTML/JS where I parse DOM elements and try to find the missing ones and delete them. However, it says: includes() is not a function. When I execute this, I get type Object for newHTML and newHTMLO (newHTMLO is just a experimental variable). I tried Array.from() and Object.valueOf(), both producing the same result.

Can someone help me to get this working?

var deleteLinks = $(".remove-button .remove-from-cart");
console.log("registered: " + deleteLinks.length);
deleteLinks.on('click', function(ev){
    ev.preventDefault();
    console.log("registered: " + deleteLinks);
    var currentHTML = $('.product');
    var currentText = $('.product .product-details .name-header');  
    var newHTML ;
    var deleteIndices = [];
        $.ajax({
        url: this.href,
        type: "GET",
        dataType: "html",
          success: function(data) {
              newHTMLO = $(data).find('.product .product-details .name-header').map(function() { return this.innerText.toUpperCase(); });   
              newHTML = Object.values(newHTMLO);
              for(i = 0; i  < newHTML.length; i++){
                  console.log(i);
                  console.log(newHTML[i]);
                  console.log(typeof newHTML);
                  console.log(typeof newHTMLO);
                  if (!(newHTML.includes(currentText[i].innerText.toUpperCase()))) {
                console.log("found mismatch for index " + i);
                deleteIndices.push(i);
                  }
              }
          }
    });

   for(i = 0; i < deleteIndices.length; i++) {
    console.log("removing " + deleteIndices[i]);
    currentHTML[deleteIndices[i]].remove();
}
});

• javascript
• jquery

• 1 includes() is not supported in IE. You also need a get() call after map() – Rory McCrossan Commented Oct 3, 2018 at 9:24
• The method includes is only defined for Array and String – Christian Vincenzo Traina Commented Oct 3, 2018 at 9:24
• 2 I know that includes is not defined for object. in which case you already have you answer. – Rory McCrossan Commented Oct 3, 2018 at 9:30
• 1 @ItFreak People are trying to help you. If they don't understand the question then you need to make it clearer, so that they do, otherwise how can they help? – Reinstate Monica Cellio Commented Oct 3, 2018 at 9:58
• 1 If you know that includes is not defined for an object then why did you use it on an object? As for people not understanding "the question"...the question was "can you get it working?"...that's easy enough to prehend on its own, but it's too vague. We can't suggest how to change the code without more info about what you want to do. You say you want to " try to find the missing ones and delete them"...but how can you find something if it's missing? By definition, it's not there to find. We'll need an example, and more detail about the intent of the problematic lines of code, in particular. – ADyson Commented Oct 3, 2018 at 10:14

1 Answer 1

I think the problem you have is that you're treating a jQuery object array as a regular object array, which it is not.

Change this one line and see if it resolves your problem...

newHTMLO = $(data)
    .find('.product .product-details .name-header')
    .toArray()    // converts a jQuery object array to a regular array
    .map(function() { return this.innerText.toUpperCase(); });

If that doesn't help then I'll remove this as not relevant.

Here's an example. Map1 is your current method and map2 is the modified version...

var divs = $("body").find("div");

var map1 = divs.map(function(d) { return d.innerText; });
var map2 = divs.toArray().map(function(d) { return d.innerText; });

console.log("map1: " + map1)
console.log("map2: " + map2);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>div #1</div>
<div>div #2</div>
<div>div #3</div>
<div>div #4</div>