How do I load the contents of a text file into a javascript variable

Question

I have a text file in the root of my web app http   localhost foo txt and I d like to load it into a variable in javascript   in groovy I would do this   def fileContents    http   localhost foo txt  toURL   text  println fileContents    How can I get a similar result in javascript

User · Answer

Update 2020  Using Fetch with async await  const response   await fetch  http   localhost foo txt    const data   await response text    console log data     Note that await can only be used in an async function  A longer example might be   x000D   x000D  async function loadFileAndPrintToConsole url    x000D    try   x000D      const response   await fetch url   x000D      const data   await response text    x000D      console log data   x000D      catch  err    x000D      console error err   x000D      x000D    x000D   x000D  loadFileAndPrintToConsole  https   threejsfundamentals org LICENSE    x000D   x000D   x000D

User · Answer

XMLHttpRequest  i e  AJAX  without the XML   The precise manner you do this is dependent on what JavaScript framework you re using  but if we disregard interoperability issues  your code will look something like   var client   new XMLHttpRequest    client open  GET     foo txt    client onreadystatechange   function       alert client responseText     client send     Normally speaking  though  XMLHttpRequest isn t available on all platforms  so some fudgery is done  Once again  your best bet is to use an AJAX framework like jQuery   One extra consideration  this will only work as long as foo txt is on the same domain  If it s on a different domain  same-origin security policies will prevent you from reading the result

User · Answer

This should work in almost all browsers   var xhr new XMLHttpRequest    xhr open  GET   https   12Me21 github io test txt    xhr onload function        console log xhr responseText     xhr send      Additionally  there s the new Fetch API   fetch  https   12Me21 github io test txt    then  response   gt  response text      then  text   gt  console log text

User · Answer

If you only want a constant string from the text file  you could include it as JavaScript    x000D   x000D     This becomes the content of your foo txt file x000D  let text     x000D  My test text goes here  x000D     x000D   lt script src  foo txt  gt  lt  script gt  x000D   lt script gt  x000D    console log text   x000D   lt  script gt  x000D   x000D   x000D    The string loaded from the file becomes accessible to JavaScript after being loaded  The   backtick  character begins and ends a template literal  allowing for both   and   characters in your text block   This approach works well when you re attempting to load a file locally  as Chrome will not allow AJAX on URLs with the file    scheme

User · Answer

One thing to keep in mind is that Javascript runs on the client  and not on the server  You  can t really  load a file  from the server in Javascript  What happens is that Javascript sends a request to the server  and the server sends back the contents of the requested file  How does Javascript receive the contents  That s what the callback function is for  In Edward s case  that is      client onreadystatechange   function       and in danb s case  it is   function data      This function is called whenever the data happen to arrive  The jQuery version implicitly uses Ajax  it just makes the coding easier by encapsulating that code in the library

User · Answer

This should work in almost all browsers   var xhr new XMLHttpRequest    xhr open  GET   https   12Me21 github io test txt    xhr onload function        console log xhr responseText     xhr send      Additionally  there s the new Fetch API   fetch  https   12Me21 github io test txt    then  response   gt  response text      then  text   gt  console log text

User · Answer

When working with jQuery  instead of using jQuery get  e g   jQuery get  foo txt   undefined  function data        alert data       html   done function         alert  second success       fail function jqXHR  textStatus        alert textStatus      always function         alert  finished          you could use  load which gives you a much more condensed form       myelement   load  foo txt       load gives you also the option to load partial pages which can come in handy  see api jquery com load

User · Answer

here is how I did it in jquery   jQuery get  http   localhost foo txt   function data        alert data

User · Answer

If your input was structured as XML  you could use the importXML function   More info here at quirksmode    If it isn t XML  and there isn t an equivalent function for importing plain text  then you could open it in a hidden iframe and then read the contents from there

User · Answer

One thing to keep in mind is that Javascript runs on the client  and not on the server  You  can t really  load a file  from the server in Javascript  What happens is that Javascript sends a request to the server  and the server sends back the contents of the requested file  How does Javascript receive the contents  That s what the callback function is for  In Edward s case  that is      client onreadystatechange   function       and in danb s case  it is   function data      This function is called whenever the data happen to arrive  The jQuery version implicitly uses Ajax  it just makes the coding easier by encapsulating that code in the library

User · Answer

XMLHttpRequest  i e  AJAX  without the XML   The precise manner you do this is dependent on what JavaScript framework you re using  but if we disregard interoperability issues  your code will look something like   var client   new XMLHttpRequest    client open  GET     foo txt    client onreadystatechange   function       alert client responseText     client send     Normally speaking  though  XMLHttpRequest isn t available on all platforms  so some fudgery is done  Once again  your best bet is to use an AJAX framework like jQuery   One extra consideration  this will only work as long as foo txt is on the same domain  If it s on a different domain  same-origin security policies will prevent you from reading the result

User · Answer

Update 2020  Using Fetch with async await  const response   await fetch  http   localhost foo txt    const data   await response text    console log data     Note that await can only be used in an async function  A longer example might be   x000D   x000D  async function loadFileAndPrintToConsole url    x000D    try   x000D      const response   await fetch url   x000D      const data   await response text    x000D      console log data   x000D      catch  err    x000D      console error err   x000D      x000D    x000D   x000D  loadFileAndPrintToConsole  https   threejsfundamentals org LICENSE    x000D   x000D   x000D

User · Answer

XMLHttpRequest  i e  AJAX  without the XML   The precise manner you do this is dependent on what JavaScript framework you re using  but if we disregard interoperability issues  your code will look something like   var client   new XMLHttpRequest    client open  GET     foo txt    client onreadystatechange   function       alert client responseText     client send     Normally speaking  though  XMLHttpRequest isn t available on all platforms  so some fudgery is done  Once again  your best bet is to use an AJAX framework like jQuery   One extra consideration  this will only work as long as foo txt is on the same domain  If it s on a different domain  same-origin security policies will prevent you from reading the result

User · Answer

If your input was structured as XML  you could use the importXML function   More info here at quirksmode    If it isn t XML  and there isn t an equivalent function for importing plain text  then you could open it in a hidden iframe and then read the contents from there

User · Answer

XMLHttpRequest  i e  AJAX  without the XML   The precise manner you do this is dependent on what JavaScript framework you re using  but if we disregard interoperability issues  your code will look something like   var client   new XMLHttpRequest    client open  GET     foo txt    client onreadystatechange   function       alert client responseText     client send     Normally speaking  though  XMLHttpRequest isn t available on all platforms  so some fudgery is done  Once again  your best bet is to use an AJAX framework like jQuery   One extra consideration  this will only work as long as foo txt is on the same domain  If it s on a different domain  same-origin security policies will prevent you from reading the result

User · Answer

Update 2019  Using Fetch   fetch  http   localhost foo txt      then response   gt  response text       then  data    gt        console log data         https   developer mozilla org en-US docs Web API Fetch API

User · Answer

here is how I did it in jquery   jQuery get  http   localhost foo txt   function data        alert data

User · Answer

If you only want a constant string from the text file  you could include it as JavaScript    x000D   x000D     This becomes the content of your foo txt file x000D  let text     x000D  My test text goes here  x000D     x000D   lt script src  foo txt  gt  lt  script gt  x000D   lt script gt  x000D    console log text   x000D   lt  script gt  x000D   x000D   x000D    The string loaded from the file becomes accessible to JavaScript after being loaded  The   backtick  character begins and ends a template literal  allowing for both   and   characters in your text block   This approach works well when you re attempting to load a file locally  as Chrome will not allow AJAX on URLs with the file    scheme

User · Answer

here is how I did it in jquery   jQuery get  http   localhost foo txt   function data        alert data

User · Answer

When working with jQuery  instead of using jQuery get  e g   jQuery get  foo txt   undefined  function data        alert data       html   done function         alert  second success       fail function jqXHR  textStatus        alert textStatus      always function         alert  finished          you could use  load which gives you a much more condensed form       myelement   load  foo txt       load gives you also the option to load partial pages which can come in handy  see api jquery com load

User · Answer

here is how I did it in jquery   jQuery get  http   localhost foo txt   function data        alert data

User · Answer

If your input was structured as XML  you could use the importXML function   More info here at quirksmode    If it isn t XML  and there isn t an equivalent function for importing plain text  then you could open it in a hidden iframe and then read the contents from there

User · Answer

If your input was structured as XML  you could use the importXML function   More info here at quirksmode    If it isn t XML  and there isn t an equivalent function for importing plain text  then you could open it in a hidden iframe and then read the contents from there

User · Answer

Update 2019  Using Fetch   fetch  http   localhost foo txt      then response   gt  response text       then  data    gt        console log data         https   developer mozilla org en-US docs Web API Fetch API

[javascript] How do I load the contents of a text file into a javascript variable?

Update 2020: Using Fetch with async/await

Examples related to javascript