How can I get an id from a JSON response in jsGrid?

I have a jsGrid that has rows of products. I have a button that adds a product to the cart but this button needs a product id. How can I get the product id?

$(function() {
  $('.jsGrid').jsGrid({
    height: "500px",
    width: "50%",
    filtering: true,
    sorting: true,
    paging: true,
    autoload: true,
    pageSize: 10,
    pageButtonCount: 5,
    deleteConfirm: "Do you really want to delete client?",
    controller: {
      loadData: function(filter) {
        var d = $.Deferred();
        $.ajax({
          url: "{% url 'shop:get' %}",
          type: "GET",
          dataType: "json",
          data: filter,
        }).done(function(response) {
          var fields = [];
          for (let i = 0; i < response.length; i++) {
            fields.push(response[i].fields);
          }
          d.resolve(fields);
        });
        return d.promise();
      }
    },
    fields: [{
      name: "name",
      title: "Наименование",
      type: "text",
      width: 100
    }, {
      name: "prime_cost",
      title: "Себестоимость",
      type: "number",
      width: 100
    }, {
      name: "sell_price",
      title: "Цена для продажу",
      type: "number",
      width: 100
    }, {
      name: "stock",
      title: "На складе",
      type: "number",
      width: 100
    }, {
      type: "control",
      width: 100,
      editButton: false,
      deleteButton: false,
      itemTemplate: function(value, item) {
        var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);
        var $customButton = $("<button>").attr({
          'data-target': "#exampleModal",
          'data-toggle': 'modal',
          class: 'cartAdd'
        }).on('click', function() {
          let csrf = $("input[name=csrfmiddlewaretoken]").val();
          let td = $(this).parents('td');
          let productID = td.children('.product_id').val();
          console.log(data);
          $('#product_id').val(productID);
        });
        return $result.add($customButton);
      },
    }]
  });
});

AJAX response:

[{
  "model": "shop.product",
  "pk": 4,
  "fields": {
    "category": 2,
    "name": "Balls",
    "slug": "balls",
    "sell_price": "12.00",
    "prime_cost": "1.00",
    "usd_price": "12.00",
    "stock": 123,
    "created": "2020-07-13T07:33:33.627Z",
    "updated": "2020-07-13T07:33:33.627Z"
  }
}, {
  "model": "shop.product",
  "pk": 5,
  "fields": {
    "category": 2,
    "name": "Rod",
    "slug": "rod",
    "sell_price": "100.00",
    "prime_cost": "12.00",
    "usd_price": "12.00",
    "stock": 1222,
    "created": "2020-07-13T07:34:10.547Z",
    "updated": "2020-07-13T07:34:10.547Z"
  }
}, {
  "model": "shop.product",
  "pk": 1,
  "fields": {
    "category": 1,
    "name": "Table",
    "slug": "table",
    "sell_price": "12.00",
    "prime_cost": "1.00",
    "usd_price": "1.50",
    "stock": 985,
    "created": "2020-07-11T05:55:00.203Z",
    "updated": "2020-07-13T09:22:48.788Z"
  }
}, {
  "model": "shop.product",
  "pk": 3,
  "fields": {
    "category": 3,
    "name": "\u0418\u0437\u0434\u0435\u043b\u0438\u0435 \u0438\u0437 \u0431\u0443\u043c\u0430\u0433\u0438",
    "slug": "izdelie-iz-bumagi",
    "sell_price": "10.00",
    "prime_cost": "1200.00",
    "usd_price": "12.00",
    "stock": 977,
    "created": "2020-07-11T09:14:46.554Z",
    "updated": "2020-07-13T09:22:48.829Z"
  }
}, {
  "model": "shop.product",
  "pk": 2,
  "fields": {
    "category": 1,
    "name": "\u0421\u0442\u0443\u043b",
    "slug": "stul",
    "sell_price": "1000.00",
    "prime_cost": "12.00",
    "usd_price": "10.00",
    "stock": 893,
    "created": "2020-07-11T06:10:27.666Z",
    "updated": "2020-07-13T09:22:48.886Z"
  }
}]

try to parse your json data and after you can use that pk

      console.log(data);
      JSON.parse(data);
      $('#product_id').val(pk);

this will be right solution. just edit your code with above line.