jquery – Load JSON file and store content in variable

Question:

I have the following code:

<script type="text/javascript">
    $(document).ready(function(){
        $("form.loader").on('submit',function(e){
            e.preventDefault();
            $.ajax({
                url: "data.json",
                type: "POST",
                cache: false,
                success: function(data){
                    console.log(data);
                },
                error: function(data){
                    console.log(data);
                }
            });
        });
    });
</script>

<form class="loader" method="POST" enctype="multipart/form-data">
    <input type="file" name="data">
    <button type="submit">Cargar datos</button>
</form>

So what I want is to be able to load the JSON from an input file and store all the content of the JSON in a variable. To apply modifications and again save the file 🙂

But for now I would just like to open the file for manipulation.

In reply to @json

Using load is great to display a file as such, but if I wanted to save the contents in a variable, how should I do it?

And for some comments …

Well, little use GET. I usually always use POST. If I have to use GET, I would like to know what the reason is 🙂


Answer:

Depending on the side the file is on, you could proceed in two ways: reading the file from the client device (explained in A), or from the server (explained in B).

Your question:

If I have to use GET, I would like to know what the reason is 🙂

I will answer it in (C).

A. IF THE FILE IS ON THE CLIENT'S SIDE

You can do it using FileReader . The customer must select the file by clicking the button:

 function leerArchivo(e) { var archivo = e.target.files[0]; if (!archivo) { return; } var lector = new FileReader(); lector.onload = function(e) { var contenido = e.target.result; mostrarContenido(contenido); }; lector.readAsText(archivo); } function mostrarContenido(contenido) { var elemento = document.getElementById('contenido-archivo'); elemento.innerHTML = contenido; } document.getElementById('file-input') .addEventListener('change', leerArchivo, false);
 <input type="file" id="file-input" /> <h3>Contenido del archivo:</h3> <pre id="contenido-archivo"></pre>

Note:

This method is compatible with:

  • IE 10+
  • Firefox 3.6+
  • Chrome 13+
  • Safari 6.1+

B. IF THE FILE IS ON THE SERVER SIDE

You can do it with jQuery. In the example, the url of the file is entered in the input and when the button is pressed, the file is requested from the server through the Ajax get method. If the answer is successful, the file is displayed in a div.

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<script>
$(function() 
{
$("#button").click( function()
{
   alert('button clicked');
//       var TXT_URL = 'https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt';
   var TXT_URL = $("#input-url").val();

    $.ajax
    (
    	{
        	url : TXT_URL,
			dataType: "text",
			success : function (data) 
			{
            	$(".text").html("<pre>"+data+"</pre>");
			}
		}
	);
   });
});

</script>
Ingrese una url válida:<input type="text" id="input-url" size="50" value="https://www.mozilla.org/media/MPL/2.0/index.815ca599c9df.txt"></input>

<input type="button" id="button" value="Ver .txt"></input>
<div class="text">
  <hr />
  <h2>Texto:</h2>
</div>

C. ¿QUÉ MÉTODO USAR?

En el primer caso ninguno, ya que el servidor no interviene para nada. En el segundo caso el método GET.

The fundamental differences between “GET” and “POST”

The HTML specifications technically define the difference between “GET” and
“POST” so that former means that form data is to be encoded (by a
browser) into a URL while the latter means that the form data is to
appear within a message body. But the specifications also give the
usage recommendation that the “GET” method should be used when the
form processing is “idempotent”, and in those cases only. As a
simplification, we might say that “GET” is basically for just getting
(retrieving) data whereas “POST” may involve anything, like storing or
updating data, or ordering a product, or sending E-mail.

The HTML 2.0 specification says, in section Form Submission (and the
HTML 4.0 specification repeats this with minor stylistic changes):

If the processing of a form is idempotent (i.e. it has no lasting
observable effect on the state of the world), then the form method
should be GET. Many database searches have no visible side-effects and
make ideal applications of query forms.

If the service associated with the processing of a form has side
effects (for example, modification of a database or subscription to a
service), the method should be POST.


Las diferencias fundamentales entre “GET” y “POST”

Las especificaciones HTML definen técnicamente la diferencia entre
“GET” y “POST”, de modo que GET significa que los datos del formulario
deben ser codificados (por un navegador) en una URL mientras que POST
significa que los datos del formulario deben aparecer dentro del
cuerpo del mensaje. Pero las especificaciones también recomiendan que
el método “GET” debe ser usado cuando el procesamiento de formulario es “idempotent”, y sólo en esos casos. Como una simplificación,
podríamos decir que “GET” es usado básicamente para obtener
(recuperar) datos mientras que “POST” puede implicar cualquier cosa,
como almacenar o actualizar datos, ordenar un producto o enviar correo
electrónico.

La especificación HTML 2.0 dice, en la sección Formulario de
presentación (y la especificación HTML 4.0 lo repite con cambios
estilísticos menores):

Si el procesamiento de un formulario es idempotente (es decir, no tiene un efecto observable duradero…), entonces
el método de formulario debe ser GET. Muchas búsquedas de base de
datos no tienen efectos secundarios visibles y hacen aplicaciones
ideales de formularios de consulta.

Si el servicio asociado con el procesamiento de un formulario tiene efectos secundarios (por ejemplo, modificación de una base de datos o
suscripción a un servicio), el método debe ser POST.

Fuente: http://www.cs.tut.fi/~jkorpela/forms/methods.html

Scroll to Top