How to perform a simple state and city search with jquery and json

Navigation
0

This is my% test% and I need to search for their respective data using the ce and stronghold keys . In this case, the search is done by json that was submitted to AJAX through a form with two select: 

{
  "ce": {
    "fortaleza": [
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      },
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      }
    ],

    "sobral": [
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      },
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      }
    ]
  },
    "rn": {
    "carnaiba": [
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      },
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      }
    ],

    "sorisal": [
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      },
      {
        "nome": "Teste",
        "email": "[email protected]",
        "cel": "(xx) xx-xx"
      }
    ]
  }
}

Form with example result:

  

I have no idea how to do this with jquery, because I am completely lay.

    
asked by anonymous 12.01.2016 / 00:26

2 answers

1

You can use jQuery's $ .getJSON () method to retrieve your page data in JSON and then just select the data based on what the user typed.

See the example

index.html 

// captura o evento de submit do formulário
$('#form').submit(function(event) {
	// previne que o formulário seja enviado para a página default
	event.preventDefault();

	// salva os dados do formulário em um array
	var form = $(this).serializeArray();

	// pega o estado dos dados recuperados
	var estado = form[0];

	// pega a cidade dos dados recuperados
	var cidade = form[1];

	// faz uma requisição para a página em json
	$.getJSON('data.json', function(data) {
		// seleciona o estado e cidade baseado no que o usuário seleciononou
		var match = data[estado.value][cidade.value];

		// faz um loop no objeto retornado
		$.each(match, function(index, element) {
			// faz algo com os dados
			console.info(element);
		});
	});
});
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form id="form">
		<div>
			<label for="estado">Estado</label>
			<select id="estado" name="estado">
				<option value="ce">Ceará</option>
				<option value="outro">Outras opções</option>
			</select>
		</div>
		<div>
			<label for="cidade">Cidade</label>
			<select id="cidade" name="cidade">
				<option value="fortaleza">Fortaleza</option>
				<option value="outro">Outras opções</option>
			</select>
		</div>
		<input type="submit">
	</form>
	<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script><scriptsrc="scripts.js"></script>
</body>
</html>

data.json has the same content you provided in the post ..

    
12.01.2016 / 01:12
1

You can get the JSON file using the $.getJSON(path) method, which returns a Promise. Based on this Promise, you can check the data contained in the file if it was successfully retrieved.

Because the file has already been converted to a JS object, you can access its properties, which contain the data you want. Follow the code below. 

$(document).ready(function () {
    'use strict';

    var promiseDados = $.getJSON('dados.json'),
        chaveEstado = 'ce',
        chaveCidade = 'fortaleza';

    promiseDados.done(function (dados) {
        var pessoas = dados[chaveEstado][chaveCidade];

        pessoas.forEach(function (pessoa, index) {
            var div = $('<div></div>');

            div.append('<span>PESSOA ' + (index + 1) + '</span>');

            Object.keys(pessoa).forEach(function (key) {
                div.append('<div>' + pessoa[key] + '</div>');
            });

            $('body').append(div);
        });
    });

    promiseDados.fail(function (error) {
        console.log('Falha ao obter JSON', error);
    });
});
    
12.01.2016 / 01:14
Array? How to solve Template for children of a Wordpress post category