Magento 2: Minicart update product id issue with CustomerData

Question

I am showing a popup on click of checkout when these two products(81, 83) added in the mini cart and this is working fine. Now I have added the 81 products and any other products in the cart. But when I deleted 81 from the cart and other products are showing in the cart then clicking on checkout still showing the popup.

var resultItems = customerData.get('cart')().items;
                    $('#top-cart-btn-checkout').click(function (event) {
                        _.each(resultItems, function (item, key) {
                             console.log('testing');
                             console.log(item.product_id);
                            var myArray = ['81', '83'];
                                if(_.contains(myArray, item.product_id)) {
                                    jQuery('#mini-cart-popup').show();
                                    jQuery(this).prop('disabled', true);
                                }
                        }, this); 
                    }); 

Here is the console output. Showing array results multiple times. I am not getting what's going on.

Answer 1

Try to reload customer data section every time before get items. Like this:

$('#top-cart-btn-checkout').click(function (event) {
    let sections = ['cart'];
    customerData.invalidate(sections);
    customerData.reload(sections, true);
    var resultItems = customerData.get('cart')().items;
    _.each(resultItems, function (item, key) {
        console.log('testing');
        console.log(item.product_id);
        var myArray = ['81', '83'];
        console.log(_.contains(myArray, item.product_id)); //to check if it will go inside if or not - true or false check. 
        if(_.contains(myArray, item.product_id)) {
            console.log("code was inside if area"+item.product_id);//why it reaches here. 
            jQuery('#mini-cart-popup').show();
            jQuery(this).prop('disabled', true);
        }
    }, this); 
}); 

Answer 2

We need to check more deeply if it enters inside the if statement or not. So for that purpose I have some suggestions in comment below-

var resultItems = customerData.get('cart')().items;
                    $('#top-cart-btn-checkout').click(function (event) {
                        _.each(resultItems, function (item, key) {
                             console.log('testing');
                             console.log(item.product_id);
                            var myArray = ['81', '83'];
    console.log(_.contains(myArray, item.product_id));//to check if it will go inside if or not - true or false check. 
                                if(_.contains(myArray, item.product_id)) {
    console.log("code was inside if area"+item.product_id);//why it reaches here. 
                                    jQuery('#mini-cart-popup').show();
                                    jQuery(this).prop('disabled', true);
                                }
                        }, this); 
                    }); 

It should make testing more interesting and you can check your true and false even before it enters the if block.
Solution 2
This command will check a particular value in array (for example) -

var arr = ["a", "A", "b", "B", "a", "C", "c", "B"];  
var val = "A";  
$.inArray(val, arr);//this function will return some integer value, i means the position of the string in the array or it will return -1 if element not found. 

In your case - try replace these lines

var myArray = ['81', '83'];
                                if(_.contains(myArray, item.product_id)) {
                                    jQuery('#mini-cart-popup').show();

Replace with

var myArray = ['81', '83'];
var vib_temp_vari=jQuery.inArray(item.product_id, myArray);
                                if(vib_temp_vari != -1) {
                                    jQuery('#mini-cart-popup').show();