Estoy creando un proyecto con JavaScript donde muestro una lista de artículos que tomo desde una API, al mostrar la lista de artículos tengo que hacer que cuando se le dé clic al nombre del artículo me redireccione a otra página donde muestre información más detallada.
Mi problema es que tengo que tomar el valor del id del producto seleccionado para que así pasar a la siguiente API para mostrar la información.
Al mostrar los datos lo hago de manera que de manera recursiva se insertan con un mismo bloque de código por lo cual se me complica tomar solo el id del producto al que selecciono.
Este es el HTML donde inserto la información: '''
<div class="row">
<div class="col-8" id="divItems">
</div>
<div class="col-2">
</div>
<div class="col-2" id="divCategories">
<br/>
</div>
</div>
</div>
<div id="template_item" style="display: none;" onclick="producto();">
<!--
<div class="row">
<div class="col">
<div class="card-body">
<div class="row mb-4">
<div class="col-md-4 col-lg-3 col-xl-3">
<a href="#!">
<img class="img-fluid w-100" src="ITEM_SMALL_IMAGE">
</a>
</div>
<div class="col-md-5 col-lg-9 col-xl-9">
<div class="d-flex justify-content-between">
<div>
<br/>
<h5 onClick="irLink()">ITEM_SHORT_DESCRIPTION</h5>
<a id="numeroId">ITEM_ID</a>
<p class="text-muted text-uppercase small">ITEM_LONG_DESCRIPTION</p>
</div>
<div>
<br/>
<p><span><strong>$ITEM_PRICE</strong></span></p>
</div>
</div>
</div>
</div>
<hr class="mb-4">
</div>
</div>
</div> -->
</div>
'''
Este es el código Javascript con el que accedo a la API:
'''
function load_categories(){
$.ajax({
type: "GET",
url: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status, jqXHR){
$.each(data.data.categories, function (i, category) {
var htmlCheckbox = '' +
' <div class="form-check">' +
' <input class="form-check-input store_category" type="checkbox" onchange="searchByCategory();" name="category" value="' + category.description + '" id="category_' + i + '">' +
' <label class="form-check-label" for="category_' + i + '"> ' +
' ' + category.description +
' </label>' +
' </div>';
$("#divCategories").append(htmlCheckbox);
});
},
error: function(jqXHR, status){
console.log("Error");
console.log(jqXHR);
mostrarMensaje();
}
});
}
function mostrarMensaje(){
alert("No hay productos para su busqueda");
}
function searchByCategory(){
var selectedCategories = '';
$(".store_category").each(function(element, index, set){
if ($(this).prop("checked")) {
selectedCategories = selectedCategories + this.value + ';';
}
});
$.ajax({
type: "GET",
url: "" + selectedCategories,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status, jqXHR){
console.log(data);
render_items(data);
},
error: function(jqXHR, status){
console.log("Error");
console.log(jqXHR);
}
});
}
function searchByText(){
$.ajax({
type: "GET",
url: "" + $("#txtSearchByText").val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, status, jqXHR){
render_items(data);
},
error: function(jqXHR, status){
console.log("Error");
console.log(jqXHR);
}
});
}
function render_items(data){
$("#divItems").empty();
var contador = 1;
$.each(data.data.items, function(i, item) {
var html_ITEM = $("#template_item").html();
html_ITEM = html_ITEM.replace('<!--', '');
html_ITEM = html_ITEM.replace('-->', '');
html_ITEM = html_ITEM.replace('ITEM_SHORT_DESCRIPTION', item.short_description);
html_ITEM = html_ITEM.replace('ITEM_ID', item.product_id);
var miObjeto = { "id": item.product_id, "nombre": item.short_description};
localStorage.setItem("datos" + contador, JSON.stringify(miObjeto));
html_ITEM = html_ITEM.replace('ITEM_LONG_DESCRIPTION', item.long_description);
html_ITEM = html_ITEM.replace('ITEM_SMALL_IMAGE', item.images_small);
html_ITEM = html_ITEM.replace('ITEM_PRICE', item.price);
$("#divItems").append(html_ITEM);
contador++;
});
}
'''