0

Estoy haciendo un select en el cual tiene su categoría sobre el nombre y actualmente se ve de esta manera.

introducir la descripción de la imagen aquí

Como pueden notar mas abajo se esta repitiendo la categoría de "dispensadores" y esto pasa siempre que haya un nuevo producto, crea otro header y la idea es que se agrupen todas las categorías con los productos respectivos.

Qué podría hacer para esto?

Adjunto el codigo donde se arma este select:

$.get('../api/v1/productos/all', {}, function(returnedData) {
            if (returnedData["error"] == false) {
                returnedData["productos"].forEach(function(productos){
                    $("#id_producto").append("<optgroup label='" + productos["categoria"]["nombre"] + "'><option value='" + productos["id_producto"] + "'>" + productos["nombre"] + "</option></optgroup>");
                });
            } else
                SweetAlert("error", "Existió un error. Por favor actualice la ventana.");
        });

Adjunto tambien lo que me devuelve el servidor:

introducir la descripción de la imagen aquí

Gracias de antemano por la ayuda :)

4
  • Puedes incluir un json que muestre la estructura de returnedData? Commented el 11 mar. 2020 a las 22:18
  • He editado la pregunta con esa info :)
    – Juan94
    Commented el 11 mar. 2020 a las 22:21
  • Te interesa que las categorías aparezcan en orden alfabético? Commented el 11 mar. 2020 a las 22:25
  • En una imagen el objeto no se ve bien, pero parece que el problema en sí es que los datos no vienen ordenados/agrupados por categoría. Si eres el programador de la API deberías dotarla de esa posibilidad para poder acceder por algo como: api/v1/productos/all?groupby=category Si es una API de terceros y es profesional puede que tenga esa posibilidad, deberías preguntar por ella.
    – A. Cedano
    Commented el 11 mar. 2020 a las 22:39

2 respuestas 2

0

Prueba esto. Me tomé la libertad de remover el uso de jQuery, pues no es necesario. Vanilla js suele tener mejor rendimiento que con cualquier framework. No probé el código, pero espero que funcione

let idContainer = document.getElementById('id_producto');
      fetch('../api/v1/productos/all')
      .then(response => response.json())
      .then(data => {
        const categorias = data.reduce(function(cats, prod){
          let categoriaActual = cats.find(c => c.id_categoria === prod.categoria.id_categoria);
          if(!categoriaActual){
            categoriaActual = prod.categoria;
            cats.push(categoriaActual);
          }
          categoriaActual.productos = categoriaActual.productos || [];
          categoriaActual.productos.push(prod);

        }, [] );
        categorias.forEach(categoria => {
          let cat = document.createElement('optgroup');
          cat.label = categoria.nombre;
          categoria.productos.forEach(producto => {
            let prod = document.createElement('option');
            prod.value = producto.id_producto;
            prod.innerText = producto.nombre;
            cat.append(prod);
          })
          idContainer.append(cat);

        })
      }).catch(function(error) {
        SweetAlert("error", "Existió un error. Por favor actualice la ventana.");
    });
3
  • Te cuento que no, ya inclui la libreria vanilla pero siempre me sale el error de "existio un error. por favor actualice la ventana. Y no carga las opciones en el select :(
    – Juan94
    Commented el 12 mar. 2020 a las 15:02
  • Qué librería? Vanilla JS es como llamamos a Javascript sin librerías ni frameworks. Puedes incluir información sobre el error, como una captura? Commented el 12 mar. 2020 a las 17:04
  • 1
    Aprecio la ayuda pero ya pude solucionarlo, gracias :)
    – Juan94
    Commented el 12 mar. 2020 a las 17:07
0

Luego de probar varias veces pude cambiar lo que me retorna el servidor a esta forma y creo que quedo mejor así:

introducir la descripción de la imagen aquí

Ahora trae las categorías con sus productos :)

Y en el javascript lo cambie de esta manera y ya sale todo bien ordenado :)

$.get('../api/v1/productos/all2', {}, function(returnedData) {
            if (returnedData["error"] == false) {
                returnedData["categorias"].forEach(function(categorias){
                    let categoria = "<optgroup label='" + categorias["nombre"] + "'></optgroup>";
                    $("#id_producto").append(categoria);

                    categorias["productos"].forEach(function(productos){
                        $("#id_producto").append("<option value='" + productos["id_producto"] + "'>" + productos["nombre"] + "</option>");
                    });
                });
            } else
                SweetAlert("error", "Existió un error. Por favor actualice la ventana.");
        });

Guarde el optgroup en una variable y lo agregue al select antes de cargar los productos y ya sale bien.

introducir la descripción de la imagen aquí

Muchas gracias igual me ayudo para pensar las sugerencias :)

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.