Dependent selects with JSON

Asked

Viewed 49 times

-1

How popular a second select according to first from a JSON file.

HTML:

<select id="município_id" name="municipio">

<select id="estabelecimento_id" name="estabelecimento">

JSON: [{"municipio":"pesqueira","estabelecimento":"UBS pesqueira","cod":"7866"},{"municipio":"pesqueira","estabelecimento":"UBS centro","cod":"7767"},{"municipio":"custodia","estabelecimento":"Pronto Atendimento em saúde","cod":"8655"}]...

JSON is great! It has this structure, cities can repeat themselves but not establishment. Any help is welcome.

javascript jquery

  • You need to turn this json object. And then add option in select and then create event when a select is changing

  • Refers to a COMBO BOX ? You select the city, and load the establishments into another <select>?

  • Misspelled question

  • @Leocaracciolo Chegai leo. rs

  • Yes Risk, selects the city and loads the establishments, both by name!

  • Any more uploads or just this @sedarky

  • Just that same @Risk

Show 2 more comments

1 answer

0


Good afternoon friend, you have a problem with this JSON, it does not have the best structure for you to work, the ideal is that the municipality was unique something like:

[
  {
    "municipio":"pesqueira",
    "estabelecimentos": {
      {"name": "UBS pesqueira","cod":"7866"},
      {"name": "UBS pesqueira","cod":"7866"}
    }
  }
]

But if you can’t touch this JSON structure you can filter the municipalities of this JSON to then mount the settlement values

const municipios = [...new Set(objeto.map(obj => obj.municipio)]

const selectMunicipios = document.querySelector('#município_id')

selectMunicipios.onchange = () => {
  const municipio = selectMunicipios.value

  const filtrado = objeto.filter(item => item.municipio === municipio)
  const estabelecimentos = filtrado.map(item => item.estabelecimento)
  const selectEstabelecimento = document.querySelector('#estabelecimento_id')
  
  selectEstabelecimento.innerHtml = ''

  estabelecimentos.forEach(estabelecimento => {
    const option = document.createElement('option')
    option.innerText = estabelecimento

    selectEstabelecimento.appendChild(option)
  })

}

municipios.forEach(municipio => {

  const option = document.createElement('option')
  selectMunicipios.appendChild(option)
  
})

This code should work if I didn’t write anything wrong ;), where I put the name object means that you must call your JSON object.

Remembering this code is only necessary if you really can’t fix your JSON structure, if you fix this JSON would be much better and easier to work with.

I hope I’ve helped!

  • There are 3984 lines! It would take too long!

  • not intendi, which exactly would take too long?

  • Edit the JSON file in hand, leave it structured: each municipality with its establishments!

  • how would I call the JSON object?

  • On the line: const municipios = [...new Set(obj_.cnes.map(obj => obj.municipio))] makes a mistake Uncaught TypeError: Cannot read property 'map' of undefined

  • you need to call with the name of the variable that is receiving the JSON that you said there in the post, remembering that if you are receiving a pure JSON then you should convert it to javascript object with the code: &#xA;const objeto = JSON.parse(nome_do_objeto_em_string)&#xA;

  • I’m doing like this: var = [{"municipio":"nome_municipio","cod":"1234"},{}...]. Afterward: var obj_ = JSON.stringify(var); So const municipios = [...new Set(obj_.map(obj => obj.municipio))]. I tried JSON.parse() but it gave error, then searching...I changed to stringify, but continues!

  • Stringify doesn’t help in this case it’s like you’re converting string into string. You can try this: JSON.parse(JSON.stringify(text)). If you keep giving error it is important to test this JSON in a JSON validator online anyway, because there is a good chance it is broken.

  • Looking again at your example you are creating a variable like 1 array of a string position. Try putting everything as a string like this: var = JSON.parse('[{"municipio":"municipio","Cod":"1234"},{}...]')

  • thanks for the promptness! Unfortunately it didn’t work out. I did as you said obj_ = JSON.parse('[{"..."}]') but was giving error: Invalid or unexpected token.

  • I made a solution with Session(Jango): taking city value in one view and recovering in another, consulting the establishments in the comic and rendering for another view!

Show 6 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.