Take a good look at what dataset vs .data – Difference? dataset do, or data for that matter, and then take a look at your inner HTML in .productItem there is not a single data attribute inside, no wonder dataset can not fetch any and is undefined. Please tel me what is wanted result in console.log(productInfo[0].name); What is expected to be inside and we will extract it.
You can fetch a name by simply doing:
$(this).text()
And to clarify, your click function is extracting data from HTML, not JSON data itself. You put that JSON data into dynamically reddened HTML, and you get it with on click.
Also if only name is wanted result, keep in mind if you add any more text into .productItem you will have dig a bit deeper with click selector, adjust it. In current example is working.
Example:
//$.getJSON("assets/products/sample_products.json", function(data) {
var product_data = '';
var data= { "data" : [{"id":"1333","article_number":"4016","barcode":"heeftgeenbarcode4","name":"White Albino"}] };
$.each(data.data, function(key, value) {
// console.log(data);
product_data += '<div class="col-3 productCard">';
product_data += '<a href="#" class="productItem">';
product_data += '<div class="card">';
product_data += '<img src="assets/images/Firecracker.jpg" alt="Avatar" style="width:100%; height: 8vh;">';
product_data += '<div class="container">';
product_data += '<p>' + value.name + '</p>';
product_data += '</div>';
product_data += '</div>';
product_data += '</a>';
product_data += '</div>';
});
$('#touchViewProducts').append(product_data);
//function to add item to shopping cart
$(".productItem").click(function(e) {
e.preventDefault();
console.log($(this).text());
var productInfo = $(this.dataset);
//console.log(productInfo[0].name);
})
//})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row touchViewSection">
<!-- shopping sector -->
<!-- touchView -->
<!-- categories menu -->
<div class="col-3 categoriesSection">
<div class="categories">
<p style="background-color: white; margin-bottom: 0px"> Categories </p>
<a class="nav-link" id="all" href="#">All</a>
<a class="nav-link" id="black-thunder" href="#">Black-thunder</a>
<a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a>
<a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a>
<a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a>
<a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a>
</div>
</div>
<!-- categories menu -->
<!-- <p style="background-color: white; margin-bottom: 0px" > Products </p>-->
<div class="col-9 productItems">
<br>
<div class="row" id="touchViewProducts">
</div>
</div>
</div>
<!--/touchView -->
<!--Keyboard View -->
<div class="row keyboardViewSection">
<div class="col-12 keyboardViewRow">
<table id="data-table" class="table table-bordered" style="width: 100%;">
<thead id="tableHead">
<tr>
<th> # </th>
<th> Product name </th>
<th> Free Stock </th>
<th> Price </th>
<th> Action </th>
</tr>
</thead>
</table>
</div>
</div>
<!--/Keyboard View -->
<div class="footer">
<div class="container">
<p class="text-muted"> Developed by Vesta Group</p>
</div>
</div>
</div>
<!--/shopping sector-->
<div class="col-4 cartSection">
<!--cart-->
<div class="row">
<div class="col-5">Product</div>
<div class="col-1">Pcs.</div>
<div class="col-2">Price</div>
<div class="col-3">Total</div>
</div>
<hr style="background-color: white;">
<div class="row cartCheck">
<div class="col-5">Number of products</div>
<div class="col-1">1</div>
<div class="col-2">Subtotal</div>
<div class="col-3 total">€ 0,00</div>
<div class="col-5"></div>
<div class="col-1"></div>
<div class="col-2">Total </div>
<div class="col-3">€ 0,00</div>
<div class="col-12 checkoutBtn"> Checkout </div>
<div class="col-6 addDiscountBtn"> Add discount </div>
<div class="col-6 cancelBtn"> Cancel </div>
</div>
<!--/cart-->
</div>
</div>
</div>
</div>