0

Esse é o meu json de teste e preciso, através das chaves "ce" e "fortaleza", realizar uma busca de seus respectivos dados. No caso, a busca é feita por AJAX que foi submetido a um POST através de um formulário com dois 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"
      }
    ]
  }
}

Formulário com resultado exemplo:

inserir a descrição da imagem aqui

Não tenho a mínima ideia de como fazer isso com jquery, pois sou completamente leigo.

2 Respostas 2

1

Você pode usar o método $.getJSON() do jQuery para recuperar os dados da sua página em JSON e ai basta selecionar os dados baseado no que o usuário digitou.

Veja o exemplo

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>
	<script src="scripts.js"></script>
</body>
</html>

O data.json tem o mesmo conteúdo que você forneceu na postagem..

4
  • Perfeito! Como faço para, quando houver uma nova busca, limpar a anterior? Obrigado.
    – Lollipop
    12/01/2016 às 13:31
  • O que seria "limpar" no caso? Voltar os selects ao estado inicial?
    – waghcwb
    12/01/2016 às 15:23
  • Exatamente. Ele limpa o anterior e consulta um novo. Isso tudo após o clique no submit. Outro problema que fica se repetindo. Queria que não ouvesse uma segunda consulta no mesmo estado+cidade, mas somente estado+outra cidade.
    – Lollipop
    12/01/2016 às 16:50
  • Para resetar um select para setar o index dele para -1 (ou qualquer outro index que quiser), assim: $('select').prop('selectedIndex', -1); se preferir pode ainda inserir um input type reset e simular um clique nele. E para desabilitar o select vai depender da situação, você quer que após atualizar a página ele possa selecionar tudo novamente? Basta usar isso $('select option').attr('disabled','disabled'); Caso contrário pode trabalhar com localStorage, sessionStorage, etc
    – waghcwb
    13/01/2016 às 12:48
1

Você pode obter o arquivo JSON por meio do método $.getJSON(path), que te retorna uma Promise. Com base nessa Promise, você pode verificar os dados contidos no arquivo, se o mesmo foi recuperado com sucesso.

Como o arquivo já vem convertido para um objeto JS, você pode acessar as propriedades do mesmo, que contem os dados que você quer. Segue código abaixo.

$(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);
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .