Si no es un problema usar jQuery, la solución con un archivo json y javascript is bastante fácil de implementar:
El archivo json con los datos lo ubicas en el servidor en una carpeta accesible desde la web.
En el archvio javascript definir un objeto global para la aplicación donde alojar los datos una vez recibidos:
var MiApp = function(){
this.data = [];
}
var miApp = new MiApp();
Luego para buscar el contenido y guardarlo en un objeto en javascript lo bajas utilizando $.ajax
. Se puede hacer sin jQuery pero con jQuery es mucho más fácil.
En el ejemplo la función buscarDatos() hace la llamada de ajax, por eso la ejecutamos al recibir el click en el boton Bajar Datos.
Una vez que se ejecuta la función buscarDatos() - que tiene la llamada de ajax - los datos quedan disponibles en miApp.data.
En el ejemplo agregué un boton para mostrar el contenido de miApp.data.
Para mejorarlo podrias pasarle un parametro a la función buscarData() con el nombre a devolver y filtrar ese resultado en la función success de ajax.
Importante:
Al estar el archivo en el webserver puede ser consultado directamente poniendo la url en el browser.
Y poniendo un breakpoint en la función de ajax también podrías ver todos los resultados antes de ser filtrados.
Es decir que no es para datos secretos :). Para algo así, y quitando del medio el cifrado del canal que es otro tema, necesitas implementar algo por lo menos en php.
EDIT 1
Ejemplo código revisado.
Archivo data.json:
Colocarlo en el directorio raiz del webserver.
{
"personas":[
{"nombre":"Pepe","apellido":"Trueno"},
{"nombre":"Kava","apellido":"Zorro"},
{"nombre":"Rosa","apellido":"Melo"},
{"nombre":"Elmo","apellido":"Jones"},
{"nombre":"Gato","apellido":"Negro"}
]
}
Archivo html con javascript (y jQuery)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SOes75347</title>
</head>
<body>
<p>"Mostrar los datos" muestra los datos ya bajados y guardados en miApp.data. Antes de bajar los datos no hay nada cargado.</p>
<p>"Buscar los datos" baja el archivo json, y lo almacena en miApp.data dejándo la información disponible para ser usada.</p>
<p>Después de bajar los datos, "Mostrar los datos" muestra los datos en un div.</p>
<br>
<button id="btnBuscar">Buscar los datos</button>
<br>
<br>
<button id="btnMostrar">Mostrar los datos</button>
<br>
<div id="divMostrar"></div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
function buscarDatos(){ //La función podría recibir un parámetro
//con el criterio a filtrar
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data, status, xhr) {
//Acá podés aplicar lógica de filtrado.
//El criterio puede ser pasado como parametro o
// estar previamente seteado en miApp.xxxx
//Y así quedarte con solo los registros que queres;
miApp.data = data; // Al especificar dataType: 'json'
// jQuery hace la conversión
},
error: function(xhr, status, error){
//Mostrar algun eror
}
});
};
function mostrarDatos(){
if(miApp.data.personas != null){
var texto = "";
for(var i=0; i< miApp.data.personas.length; i++){
texto = texto + miApp.data.personas[i].nombre + " " + miApp.data.personas[i].apellido + "<br>";
}
$("#divMostrar").html(texto);
}
}
var MiApp = function(){
this.data = [];
}
var miApp = new MiApp();
$(document).ready(function(){
$("#btnBuscar").click(function(e){
var event = e || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
buscarDatos();
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
});
$("#btnMostrar").click(function(e){
var event = e || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
mostrarDatos();
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
});
});
</script>
</body>
</html>