0

Buenos días estoy haciendo un filtrado con selects en un formulario, pero me surgen algunas dudas. Cuando carga la vista estos selects están todos sin marcar con lo tipico de "selecciona una opción". La cuestión es que cuando lo mando por AJAX a mi controlador para hacer una query, no se como hacer para si el no esta seleccionado es selector no lo tenga en cuenta.

Aquí mis selectores

<div class="col-6">
  <select id="tipo_inmueble" name="tipo_inmueble" class="form-control mb-2 mr-sm-2 w28 inputTasacion" onchange="filtrar();">
    <option value="">Tipo de inmueble</option>
    <option value="1">Viviendas</option>
    <option value="2">Locales</option>
    <option value="3">Garajes</option>
  </select>
</div>
<div class="col-6">
  <select id="tipo_contrato" name="tipo_contrato" class="form-control mb-2 mr-sm-2 w28 inputTasacion" onchange="filtrar();">
    <option value="">Tipo de contrato</option>
    <option value="3">VENTA</option>
    <option value="1">ALQUILER</option>
    <option value="2">ALQUILER OPCIÓN A COMPRA</option>
  </select>
</div>

Siempre utilizo onchange="filtrar();" para que cuando cambie un selector tambien mande lo que está seleccionado en los otros.

Luego mi AJAX

window.onload=filtrar;
    function filtrar(){
        var tipo_inmueble=document.getElementById('tipo_inmueble').value;
        var tipo_contrato=document.getElementById('tipo_contrato').value;
        var url = '/filtrar-inmuebles';

        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type: "GET",
            url: url,
            data: {'tipo_inmueble': tipo_inmueble,
                   'tipo_contrato': tipo_contrato},
                  beforeSend: function(){
                    //$("#laGrafica").html("<div id='loader'></div>")
                  },
                  success: function (resultado){
                      console.log(resultado);
                    //$('#resultadoCiudades').html(html)
                  },
        });
}

Hago un window.onload para que nada más cargue el documento ya me arroje todos los resultados ya que no estará ninguna opción marcada.

Luego en mi controlador

public function filtrarInmueble(Request $request)
{
        $viviendas = Vivienda::query()
                     ->with('etiqueta')
                     ->with('poblacion')
                     ->with('elDistrito')
                     ->with('galeria')
                     ->where('tipo_id', $request->tipo_inmueble)
                     ->where('estado_id', $request->tipo_contrato)
                     ->where('conectado', 1)
                     ->orderBy('id', 'DESC')
                     ->get();

        return $viviendas;
 }

Pero claro, siempre toma los valores y hasta que no selecciono los dos selectores no me arroja resultado. Hay alguna forma de comprobar si esa variable viene vacia no hacer: ->where('tipo_id', $request->tipo_inmueble)


Estoy probando así y parece que funciona pero el console log me devuelve la información de forma rara.

if(isset($request->tipo_inmueble)){
  $viviendas = $viviendas->whereIn('tipo_id', $request->tipo_inmueble);
}
if(isset($request->tipo_contrato)){
  $viviendas = $viviendas->whereIn('estado_id', $request->tipo_contrato);
}

Nada más cargo la página me devuelve todas de este modo:

(55) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Donde me crea un arreglo sabiendo que hay 55.

Pero en cuanto activo un selector me devuelve la información bien pero el arreglo lo hace de forma distinta.

{7: {…}, 24: {…}, 29: {…}, 33: {…}, 37: {…}, 38: {…}, 39: {…}, 40: {…}, 49: {…}}
1

1 respuesta 1

1

Te recomiendo usar empty en lugar de isset ya que empty ademas de revisar que la variable exista también valida que tenga un valor de '', null o false, solo hace falta negarlo con !.

PHP:

if(!empty($request->tipo_inmueble))
{
  $viviendas->where('tipo_id', $request->tipo_inmueble);
}

if(!empty($request->tipo_contrato))
{
  $viviendas->where('estado_id', $request->tipo_contrato);
}

Por lo que tu controlador te quedaría de la siguiente manera:

Controlador:

public function filtrarInmueble(Request $request)
{
    $viviendas = Vivienda::query()
                     ->with('etiqueta')
                     ->with('poblacion')
                     ->with('elDistrito')
                     ->with('galeria')
                     ->where('conectado', 1)
                     ->orderBy('id', 'DESC');

    if(!empty($request->tipo_inmueble))
    {
      $viviendas->where('tipo_id', $request->tipo_inmueble);
    }

    if(!empty($request->tipo_contrato))
    {
      $viviendas->where('estado_id', $request->tipo_contrato);
    }

    return $viviendas->get();
 }

Actualización

Si lo que deseas es regresar el valor para manipularlo con jquery o javascript con AJAX, puedes regresar la respuesta en formato JSON:

En lugar de hacer:

return $viviendas->get();

Haz esto:

return response()->json([
    'data' => [
        'viviendas' => $viviendas->get()    
    ]    
]);

y en tu AJAX puedes acceder a la respuesta de la siguiente manera:

window.onload=filtrar;
        function filtrar(){
            var tipo_inmueble=document.getElementById('tipo_inmueble').value;
            var tipo_contrato=document.getElementById('tipo_contrato').value;
            var url = '/filtrar-inmuebles';

            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                type: "GET",
                url: url,
                data: {'tipo_inmueble': tipo_inmueble,
                    'tipo_contrato': tipo_contrato},
                    beforeSend: function(){
                        //$("#laGrafica").html("<div id='loader'></div>")
                    },
                    success: function (resultado){
                        console.log(resultado.data.viviendas);
                        
                        // Aqui puedes iterar sobre los valores 
                        for (let index = 0; index < resultado.data.viviendas.length; index++) {
                            const vivienda = resultado.data.viviendas[index];
                            
                            console.log(vivienda);
                        }
                    },
            });
    }

Espero sea de ayuda, saludos!

3
  • Hola funciona perfecto, pero al hacer esto: return $viviendas->get(); ahora intento iterar el resultado en el success de la respuesta AJAX for(i=0;i<resultado.length;i++){ pero no funciona.
    – Miguel
    el 1 sep. 2021 a las 14:54
  • Nada ya lo tengo hice for(i=0;i<resultado;i++){ y listo. Muchas gracias por tu ayuda
    – Miguel
    el 1 sep. 2021 a las 14:57
  • 1
    No hay de que, hice una actualización a la respuesta poniendo un ejemplo de como podrías devolver el valor en formato JSON para que se te haga mas facil iterar sobre los valores de viviendas, por si te es de utilidad, saludos! el 1 sep. 2021 a las 16:01

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.