1

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++;
            });
        }

'''

1 respuesta 1

0

prueba lo siguiente:

                <div>
                    <br/>
                    <h5 onClick="irLink('ITEM_ID')">ITEM_SHORT_DESCRIPTION</h5>
                    <a id="numeroId">ITEM_ID</a>                                                       
                    <p class="text-muted text-uppercase small">ITEM_LONG_DESCRIPTION</p>
                </div>

De esta forma le estás pasando a la función irLink el id del artículo, a partir de ahí, la imaginación al poder.

Un Saludo.

3
  • No le pasas ningún id, sólo le estás pasando el string 'ITEM_ID'...
    – VRoxa
    Commented el 19 mar. 2021 a las 14:33
  • Mírate el código, verás que después de generar la tabla, hace un html_ITEM = html_ITEM.replace('ITEM_ID', item.product_id);para luego sustituir el string por el valor correspondiente.
    – DigiSoul
    Commented el 19 mar. 2021 a las 15:25
  • Sí, ya lo veo. Madre mía...
    – VRoxa
    Commented el 19 mar. 2021 a las 16:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.