Home / Questions / 57899
Accepted
Máxima Alekz
Asked: 2020-03-25 22:31:34 +0800 CST 2020-03-25 22:31:34 +0800 CST

Load JSON file and store content in variable

  • 772

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 the entire content of the JSON in a variable. To apply modifications to it and again save the file :)

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

In reply to @json

Using load is great for displaying a file as such, but if I wanted to store 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 must use GET, I would like to know what is the reason :)

jquery

5 Answers

  1. Well, if what you want is to show the content of a txt in a file, it would divbe more or less like this.

    $(document).ready(function(){
  $("button").click(function(){
    $("#texto").load("archivo.txt");
  });
});

    you put the divwhere you want it to be displayed and the button to execute the action.

    <button>Cargar Contenido</button>
<div id="texto"></div>

    I hope to be helpful.

    • 5
  2. Best Answer

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

    Your question:

    If I must use GET, I would like to know what is the reason :)

    I will answer it in (C).

    A. IF THE FILE IS ON THE CLIENT SIDE

    You can do it using FileReader . The client 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 supported by:

    • 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 response 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. WHICH METHOD TO USE?

    In the first case none, since the server does not intervene at all. In the second case the GET method.

    The fundamental differences between "GET" and "POST"

    The HTML specifications technically define the difference between "GET" and "POST" so that the 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 (ie 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.

    The fundamental differences between "GET" and "POST"

    The HTML specifications technically define the difference between "GET" and "POST", so that GET means that the form data must be encoded (by a browser) in a URL while POST means that the form data must appear within the message body. But the specifications also recommend that the "GET" method should be used when the form processing is "idempotent", and only then . As a simplification, we could say that "GET" is basically used to get (retrieve) data while "POST" can imply anything, such as storing or updating data, ordering a product or sending email.

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

    If the processing of a form is idempotent (ie has no lasting observable effect...), then the form method must be GET. Many database lookups have no visible side effects and make ideal query form applications.

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

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

    • 5

  3. You could solve it using:

    • API FileReaderWhich allows dynamically reading a file entered by the user .
    • The method JSON.parsewhich allows us to transform a string JSONto an object.

    Example:

    var input = document.getElementById('file'),
  code = document.getElementById('code');

input.addEventListener('change', function() {
  var file = input.files[0];
  
  var reader = new FileReader();
  reader.onload = function(e) {
    var json;
    // Aquí mostramos el texto que contiene el archivo
    code.value = e.target.result;

    // Aquí guardamos en una variable el resultado de parsear el JSON
    json = JSON.parse(e.target.result);
  };
  reader.readAsText(file);
});
    <input id="file" type="file" accept="txt/json" /><br/>
<textarea id="code" name="code" rows="5" cols="50"></textarea>

    • 2

  4. Once you upload the file, you can save the file in a SessionStorage or a LocalStorage, both are very good, since it allows you to store data on the client side with a maximum of 5mb approx. The difference between one and the other is that Session is removed if you close the browser, the other is not.

    This is invoked as follows

    sessionStorage.setItem('variable', variableJson);
localStorage.setItem('variable', variableJson);

    You pass the "variableJson" to the session or local variable with the name "variable". This is saved on the pc as a temporary file. If you need to rescue it, it should be done as follows.

    sessionStorage.getItem('variable');
localStorage.getItem('variable');

    and if you need to delete, just

    sessionStorage.removeItem('variable');
localStorage.removeItem('variable');

    I hope it helps you.

    And post is always better, since get reveals the parameters that you send to your server through the url. And it is considered as "vulnerable" if I need to attack your site, since that way I begin to understand how your server works and how I can drop it through this block.

    Good luck with whatever you're working on :D

    • 2

  5. Assuming that the file is on the server, we would load it with jquery 's .load() and store the content in a textarea so that you can edit it and once placed, the comments or changes you want to make to the file, you capture its content and you send by $.post to a php script to save the changes.

        $(document).ready(function(){
        //Cargamos el contenido  para el textarea
        $("id_load").click(function(){
            $("#id_textarea").load("demo_test.txt");
        });
        //Enviamos los datos por $.pos para el servidor para guardar los cambios 
        $("id_save").click(function(){
           //Capturamos los cambios hecho al contenido del fichero.
           var text_area = $("#id_textarea").val()
          $.post("script.php",{text_area:text_area},'json');
       });
    });

    Form:

     <form class="loader" method="POST" enctype="multipart/form-data">
    <button type="button" id="id_load">Cargar datos</button>
    <textarea name="con_txt" id="id_textarea" rows="40"></textarea>
    <button type="button" id="id_save">Guardar datos</button>
</form>

    in the script.php to add the content to the end of the file:

    <?php 
//Capturamos el datos que viene del formulario con $_POST de php.
$contenido = $_POST['text_area'];
$f = fopen("demo_test.txt", "W");
fwrite($f,$contenido);
fclose($f);
?>
    • 2