Issue on getting id from Selected HTML elements from Ajax GET response with jQuery-CodePudding

I am using ajax to display product data and then delete on click a specific on using the product id but am not able to get the product id as it is showing undefine can you guys suggest something.

In this code first I am getting the product details for the cart dropdown menu and then displaying it in list format with delete button through the first ajax and then on clicking delete should delete the element in the second ajax using the elements product id which I have saved inside data-r but on console, it showing undefined can anyone tell me what is the issue. As I know that the elements are created dynamically but I am not getting a solution

function TopCartVal() {

 // Used Route inside the ajax

  var url = "{{ route('pdt.details', ':id') }}";
  var yui = "{{ route('delete_fr.cart', ':id') }}";

// Ajax Structure

  $.getJSON( "{{ route('my.cart','json') }}", function( data ) {
       console.log(data);
       var Cart = $('#cart_dp_sec_pdt_desc');
       
      // Loop for data

       $.each(data, function(key , value) {
             console.log(value);
             url = url.replace(':id', value.product_id);
             yui = yui.replace(':id', value.product_id);
             Cart.append(`
                   <div >
                      <div >
                          <div >
                             <a href="` url `">
                               <img src="{{ asset('')}}` value.image `" alt=""/>
                             </a>
                          </div>
                      </div>
                      <div >
                          <h3 >
                             <a href="` url `">` value.product_name `</a>
                          </h3>
                          <div >` value.currency value.product_price `</div>
                      </div>
                      <div >
                         <a href="#" 
                            data-r"` value.id `" 
                            > 
                            <i ></i>
                         </a>
                      </div>
                    </div>
                      `);
      });
  });
}
// delete part
$(document).on('click', '.cart_dp_btn_ctn_delete', function(e){
   e.preventDefault();
   var id = $(this).attr('data-r'); // id of to be deleted element
   var yui = "{{ route('delete_fr.cart', ':id') }}";
   yui = yui.replace(':id', id);
   console.log(yui);
   console.log(id); // it is showing undefined`enter code here`
   // $.getJSON( yui, function(data){
   //     TopCartVal();
   // });
});

CodePudding user response：

You are missing an = here:

data-r"` value.product_id `"

But using template literals correctly will make it easier to see

`<div >
  <div >
    <div >
      <a href="${url">
        <img src="{{ asset('')}}${value.image}" alt=""/>
      </a>
    </div>
  </div>
  <div hljs-number">7">
    <h3 hljs-string">">
      <a href="${url}">${value.product_name}</a>
    </h3>
    <div hljs-string">">${value.currency value.product_price}</div>
  </div>
  <div hljs-number">1 action">
    <a href="#" data-r="${value.product_id}" hljs-string">"> 
      <i hljs-string">"></i>
    </a>
  </div>
</div>`