Javascript / HTML - filter JSON

Question

Javascript / HTML - filter JSON

Navigation

#1 by (1 votes)

0

I have 3 JSON : clinics, location and specialty, I'm trying to filter by location and by specialty with Javascript, the idea is that selecting the 1 or 2 filters together hide images from the page. The problem I have is that it works partially, for example: if I apply only one filter, there is no effect until I select the second filter. The JSON of Specialty and Locality, the charge in two Select of HTML separately and the JSON of Clinics use it to load images on the page HTML .

I leave an example in JSFiddle: link

I do not know if it is the right way to do this, really, or if there is a better alternative, it was the way I thought of implementing, suggestions are also accepted.

JSON Clinics:

[
  {
    "idc": "6",
    "ima": "clin-test1.jpg",
    "title": "Clin Test 1",
    "especialidades": "-4-16-",
    "idlo": "1"
  },
  {
    "idc": "11",
    "ima": "clin-test2.png",
    "title": "Clin Test 2",
    "especialidades": "-38-40-41-43-44-",
    "idlo": "2"
  }
]

JSON Specialties:

[
  {
    "ides": "4",
    "nom": "Alergista"
  },
  {
    "ides": "6",
    "nom": "Cardiologia"
  },
  {
    "ides": "11",
    "nom": "Cirugia"
  },
  {
    "ides": "40",
    "nom": "Cirugia Bariatrica"
  },
  {
    "ides": "44",
    "nom": "Cirugía Plástica"
  },
  {
    "ides": "1",
    "nom": "Clinica Medica"
  },
  {
    "ides": "8",
    "nom": "Cosmiatria"
  }
]

JSON Location:

[
  {
    "idlo": "1",
    "nom": "Ciudad1"
  },
  {
    "idlo": "2",
    "nom": "Ciudad2"
  },
  {
    "idlo": "3",
    "nom": "Ciudad3"
  },
  {
    "idlo": "4",
    "nom": "Ciudad4"
  }
]

javascript html json

asked by L_C 05.07.2018 в 08:30

source

1 answer

I press submit button and I change tab How can I get a parameter that comes from the get method from the controllers file in php

score 1 · Accepted Answer

The problem you had is that you subtracted 1 from the selected index. The selectedIndex returns a 0 does not need to subtract 1. Why it seemed that when you selected the second filter worked? When you selected the location that -1 affected specialty so it gave an error and so when you selected specialty seemed to work, since both filters in principle would have an index greater than 0.

function aplicarFiltro() {

  var especialidadSeleccionada = document.getElementById("selectEspecialidad").selectedIndex;
  var localidadSeleccionada = document.getElementById("selectLocalidad").selectedIndex;

  //He quitado el menos 1
  var idEspecialidad = dataEspecialidades[especialidadSeleccionada].ides;
  //He quitado el menos 1    
  var idLocalidad = dataLocalidades[localidadSeleccionada].idlo;

  for(var i = 0; i < dataClinicas.length; i++) {
    var idClin = "clin" + dataClinicas[i].idc;
    var clinicaEspecialidades = dataClinicas[i].especialidades;
    var clinicaLocalidad = dataClinicas[i].idlo;
    var ocultarClinica = document.getElementById(idClin);

    if (clinicaEspecialidades.indexOf("-" + idEspecialidad + "-") > -1 && clinicaLocalidad.indexOf(idLocalidad) > -1) {

      ocultarClinica.style.display = 'inline';
    }
    else {
      ocultarClinica.style.display = 'none';
    }

  }

}

Another tip I see that in the document ready loads everything, the best thing is that you do it in functions to make it more readable. Greetings.