¿Como puedo pasar una variable en un archivo Javascript a otro?

Question

Tengo la duda de como seria posible pasar x variable de un archivo Javascript a otro archivo del mismo formato, es decir, de archivo.js a archivo2.js.

En el siguiente ejemplo, necesito pasar la variable respuesta (que se encuentra en el archivo.js) a otro archivo (archivo2.js), la variable la obtengo de un resultado mediante Ajax.

Código Javascript:

var fecha = $("#primeraFecha").val();
var datos = new FormData()

datos.append("fecha", fecha)

$.ajax({
   url: "....",
   method:"POST",
   data: datos,
   cache: false,
   contentType: false,
   processData: false,
   dataType:'JSON',
   success: function(respuesta){
       console.log(respuesta);
   }
});

En el Html los scripts los enlazo de la siguiente manera:

    <script src="js/archivo.js"></script>
    <script src="js/archivo2.js"></script>
</body>
</html>

Hola @Victor lo puedes hacer usando el **localstorage** del navegar que te permite guardar el valor de una o mas variable. En esta página que te dejo tienes la explicación de como se usa [Ir al enlace](https://rolandocaldas.com/html5/localstorage-en-html5) — Yoel Rodriguez, Sep 04 '19 at 18:36
Lo que espero que alguien te explique en alguna de las respuestas (que estan bien) es que no pasas una variable de un archivo a otro, si no que al incluir los dos archivos en un html, es como que todo el codigo estuviera en un solo archivo. y al definir las variables globales, las ven todas las funciones — gbianchi, Sep 04 '19 at 18:50

JackNavaRow · Accepted Answer · 2021-02-18T16:23:18.837

Lo comentado por los @Canabix y @Michael Salazar es correcto, pero explicare un poco mas.

En el Navegador al crear una variable o una funcion en la raiz de un documento JavaScript se alojan en el Objeto window pero ten en cuenta el alcance de las variable daré un ejemplo a continuación:

var mi_variable ="mantequilla soup";
let mi_otra_variable = "variable local"
const const_variable = "constante";
console.log("accediento con los distinto tipos de declaracion con window")
console.info("window var =",window.mi_variable)
console.info("window let=",window.mi_otra_variable)
console.info("window const=",window.const_variable)
console.log("fin")
console.log("accediendo a funcion y a variables del mismo nombre" )
function ejemplo(){
  var mi_variable = "chispas se llama igual"
  console.info("local=" , mi_variable);
  console.info("window var=" , window.mi_variable);

}
console.info("window ejemplo=",window.ejemplo)
ejemplo()
console.log("fin")

De igual forma puedes llenar de basura el objeto window, así que pensemos en otra forma, ehhmmm callbacks, suponiendo que tu funcion ajax es la siguiente que se encuentra en archivo1.js:

$.ajax({
   url: "....",
   method:"POST",
   data: datos,
   cache: false,
   contentType: false,
   processData: false,
   dataType:'JSON',
   success: function(respuesta){
       resp = respuesta;
   }
});

y en archivo2.js tienes algo como:

function retornarRespuesta(val){
//aqui el codigo

}

Las funciones tambien se guardan en window, entonces cambiemos un poco el codigo ajax y quedaria asi :

$.ajax({
   url: "....",
   method:"POST",
   data: datos,
   cache: false,
   contentType: false,
   processData: false,
   dataType:'JSON',
   success: window.retornarRespuesta
});

Por ultimo, si tienes que pasar variable de un archivo Javascript a otro por favor valida la implementación probablemente no debe estar alli, lo ideal es crear el archivo JavaScript con las acciones a realizar por cada documento HTML

Pregunta relacionada: ¿Cómo se usa la función Window en JavaScript?

Tu respuesta me ha ayudado mucho! Tengo una duda con respecto a `window`, ya que soy nuevo utilizando Javascript, como afectaría esto (almacenar datos en window) con respecto al navegador? — Víctor Álvarez, Sep 05 '19 at 00:02
Declara siempre tus variables prefiere let o const , lee la pregunta que te coloque para que comprendas un poco más — JackNavaRow, Sep 05 '19 at 02:38

score 2 · Answer 2 · answered Sep 04 '19 at 18:42

Debes establecer una variable global.

var fecha = $("#primeraFecha").val();
var datos = new FormData();
var resp;

datos.append("fecha", fecha)

$.ajax({
   url: "....",
   method:"POST",
   data: datos,
   cache: false,
   contentType: false,
   processData: false,
   dataType:'JSON',
   success: function(respuesta){
       resp = respuesta;
   }
});

En tu archivo archivo2.js la puedes llamar sin dificultad, pero no podrás acceder a este valor "resp", a menos que sea llamada por una función que se ejecute después de haberse ejecutado el ajax.

Para este problema, puedes hacer que tu ajax sea síncrono.

No puedes hacer una petición asíncrona síncrona – JackNavaRow Sep 05 '19 at 02:39 — JackNavaRow, Sep 05 '19 at 02:39

score 2 · Answer 3 · answered Sep 04 '19 at 18:48

Puedes declarar una variable global antes de llamar a tus archivos JS o incluso en el primer archivo JS.

 <script>
    mi_variable_global= '';    
 </script>
 <script src="js/archivo.js"></script>
 <script src="js/archivo2.js"></script>

Luego aquí puedes asignar el valor a tu variable global.

var fecha = $("#primeraFecha").val();
var datos = new FormData()

datos.append("fecha", fecha)

$.ajax({
   url: "....",
   method:"POST",
   data: datos,
   cache: false,
   contentType: false,
   processData: false,
   dataType:'JSON',
   success: function(respuesta){

   //AQUI LE ASIGNAS EL VALOR Y PUEDES USARLO EN TU OTRO ARCHIVO JS SIN PROBLEMAS
   mi_variable_global= respuesta;

   console.log(respuesta);
   }
});

jcHernande2 · Answer 4 · 2019-09-04T19:04:09.683

Puedes declarar una variable fuera de tus funciones de javascript para despues solo accedes desde otro script

ejemplo:

    //este puedes der tu script1
    <script type="text/javascript">
        var varGlobal = "variable";
    </script>
   //este puedes der tu script2
    <script type="text/javascript">
        console.log(window.varGlobal);
    </script>

en tu segundo archivo recomiendo agregues ajaxstop para acceder al valor una vez que se recibió respuesta de la petición

$(document).ajaxStop(function() {
   console.log(window.varGlobal);
});

score 0 · Answer 5 · answered Sep 04 '19 at 18:56

Una posible forma es importando el archivo.js desde archivo2.js, sería así:

archivo.js

export function ajax() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json());
};

archivo2.js

import { ajax } from 'archivo.js';

ajax().then(respuesta=>console.log(respuesta));

En el html (Cuidado que el type="module" es fundamental):

<script type="module" src="js/archivo2.js"></script>

En este ejemplo estamos exportando una promesa que sería mas o menos el caso que tienes.

¿Como puedo pasar una variable en un archivo Javascript a otro?

5 Answers5

Linked

Related