JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    Total: <span id="total"></span>
</div>
<div>
    Active: <span id="active"></span>
</div>
<div>
    Inactive: <span id="inactive"></span>
</div>

JavaScript

$(document).ready (function () {


var JSONdata = {
    "products":[
          {
            "id_product":"261",
            "status":"Active",
            "price":"50.00"
          },
          {
            "id_product":"267",
            "status":"Active",
            "price":"100.00"
          },
          {
            "id_product":"280",
            "status":"Inactive",
            "price":"600.00"
          }
    ]    
};
    
    var totalProducts = JSONdata.products.length,
        activeProducts = 0,
        inactiveProducts = 0;
    
    $.each(JSONdata.products, function (key, val) {
        if (val.status === 'Active') {
            activeProducts++;
        }
    });
    
    inactiveProducts = totalProducts - activeProducts;
    
    $('#total').text(totalProducts);
	$('#active').text(activeProducts);
    $('#inactive').text(inactiveProducts);

    
});