JQuery, how to pass the slug variable

I’d like to know how I can pass the slug variable into JQuery/javascript.

I have a data-table with items, on each row there are two buttons, one (1) is using Django to create a product, the other (2) is supposed to use JQuery / JS to create a product.

To create a product with button 1 I find being straight forward and well explained.

I’d like to perform the same action on button 2, using JQuery/JS.

button 1

 <a href="{% url 'products-create' object.products_uid %}"><button type="button" class="btn btn-secondary"><i class="fa fa-pencil"></i></button></a>

with urls path:

path("products/<uuid:slug>/create/", ProductsCreateView.as_view(), name="products-create"),

views.py

class ProductsCreateView(CreateView):
    model = Products
    template_name = "products_create.html"
    slug_field = "products_uid"

button 2

 <button class="btn btn-secondary js-create-button" data-url="{% url 'api-products-create' object.products_uid %}" type="button"><span class="fa fa-pencil"></span></button>

with urls path:

path('api/products/<uuid:slug>/create/', ProductsCreateView.as_view(), name="api-products-create"),

with js (truncated function)

$(function () {

    var createProduct = function() {
        var slug = '{{ $slug }}';  /* some code/function that gets hold of the slug */
        const url = `/api/v1/products/${slug}/create/`;
       
        $.get(url)
        .done(function pollAsyncResults(data) {
          // bind pollAsyncResults to itself to avoid clashing with
          // the prior get request
          context: this
          // see the URL setup for where this url came from
          const pollAsyncUrl = `/api/products/poll_async_results/${data.task_id}`;
        })
    };

   $(".js-create-button").click(createProduct);

});

Answer

With help of @31piy answer to this SO post: How to console.log value of a data-attribute in jquery?

To select all the elements which have data-group attribute, you can loop over the elements selected by the selector [data-group], and in the iteration, get the value of the attribute using the data method.

Please see the example below:

$('[data-group]').each(function() {
  console.log($(this).data('group'));
})

I figured out that the const url could be expressed as:

const url = $(this).data('url');

When logging it in the console, I will get the string I wanted

/api/products/7d49e267-f35d-4161-8eb5-0a815abbb083/create/

Thus, the complete code would become:

$(function () {

    var createProduct = function() {
        const url = $(this).data('url');
       
        $.get(url)
        .done(function pollAsyncResults(data) {
          // bind pollAsyncResults to itself to avoid clashing with
          // the prior get request
          context: this
          // see the URL setup for where this url came from
          const pollAsyncUrl = `/api/products/poll_async_results/${data.task_id}`;
        })
    };

   $(".js-create-button").click(createProduct);

});