If it is not a problem to use jQuery, the solution with a json and javascript file is quite easy to implement:
The json file with the data is located on the server in a folder accessible from the web.
In the javascript file define a global object for the application where to host the data once received:
var MiApp = function(){
this.data = [];
}
var miApp = new MiApp();
Then to find the content and save it in an object in javascript, you can download it using $.ajax . It can be done without jQuery but with jQuery it is much easier.
In the example, the findData () function makes the ajax call, so we execute it when we receive the click on the Download Data button.
Once the findData () function - which has the ajax call is executed - the data is available in myApp.data.
In the example I added a button to show the content of myApp.data.
To improve it, you could pass a parameter to the function findData () with the name to return and filter that result in the success function of ajax.
Important:
Being the file in the webserver can be consulted directly by putting the url in the browser.
And by putting a breakpoint in the ajax function you could also see all the results before being filtered.
That is, it is not for secret data :). For something like that, and removing the encryption of the channel that is another issue, you need to implement something at least in php.
EDIT 1
Example of a revised code.
Data.json file:
Place it in the root directory of the webserver.
{
"personas":[
{"nombre":"Pepe","apellido":"Trueno"},
{"nombre":"Kava","apellido":"Zorro"},
{"nombre":"Rosa","apellido":"Melo"},
{"nombre":"Elmo","apellido":"Jones"},
{"nombre":"Gato","apellido":"Negro"}
]
}
Html file with javascript (and 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>
