Reading a file into a string in jQuery/JS

Question

The title is quite self-explanatory: I need to read a HTML file through jQuery and store its contents into a string variable.

I tried using .load and $.get, but they wouldn't do what I needed.

This is the code I've tried so far, based on the comments below, but they didn't populate my template variable at all:

var template = "";

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
    }
});

console.log(template);

AND:

var template = "";

var fileUrl = "includes/twig/image_box.twig";
jQuery.get(fileUrl).then(function(text, status, xhr){
    var html = String(text);
    template.concat(html);

    // console.log(html); // WORKS!
});

console.log(template); // Does not work

It's weird why this isn't working. Weird for me at least. This is how I'd populate a variable in PHP so I've carried the same logic to JS. Maybe there is an alternative way?

P.S:V I've also tried all alternative ways, like concatenating with += and assigning inside the callback function to template with =, but nothing worked.

Thanks to the ones who are trying to help me!

Is the HTML file available on the web or is a user uploading it? — Halcyon
– Halcyon, Commented Dec 5, 2013 at 12:31
Why won't load and get work? What was the problem? How did you try to use them? — JJJ
– JJJ, Commented Dec 5, 2013 at 12:31
@FritsvanCampen The HTML file is on my server, I just need it as a string to work with it. @Juhana Load worked, but I need to store my result in a variable, and .load is eager to append the result to the selector immediately. — aborted
– aborted, Commented Dec 5, 2013 at 12:33
Unfortunately, I can't right now, I'm not on the PC with the project. But I know that $.get kept returning an Object when I tried to log it. I'll show you the code later. — aborted
– aborted, Commented Dec 5, 2013 at 12:35

Cald · Accepted Answer · 2013-12-06 03:08:15Z

8

Maybe you should try a AJAX request with $.ajax()

Check the jQuery API here

    $.ajax({
            url: 'yourHTMLfile.html',
            type: 'get',
            async: false,
            success: function(html) {
                    console.log(html); // here you'll store the html in a string if you want
            }
    });

DEMO

EDIT: Added a demo!

I reread your question and I noticed you're calling the console log right above the ajax request but you forgot the ajax is asynchronous that means the page will do a request and only will set the template value when the response return with success(if it returns). So the console.log(template) don't appears because it may be not loaded yet.

var template = "";

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
        console.log(template); // the change!
    }
});

or

$.ajax({
    url: 'includes/twig/image_box.twig',
    type: 'get',
    async: false,
    success: function(html) {
        var twig = String(html);
        template.concat(twig);
    }
});

console.log(template); // the change!

edited Dec 6, 2013 at 3:08

answered Dec 5, 2013 at 12:33

Cald

7812 gold badges6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aborted Over a year ago

This variant works to output the grabbed content inside success only, it wont concatenate the text into another blank string and have the HTML ready to work out of the AJAX call. I've tried something like this: pastebin.com/s3HwY73U AND all similar actions, like using += etc.

Mehran Hatami · Accepted Answer · 2013-12-05 12:45:19Z

1

You can try this:

//as you see I have used this very page's url to test and you should replace it
var fileUrl = "/questions/20400076/reading-a-file-into-a-string-in-jquery-js";
jQuery.get(fileUrl).then(function(text, status, xhr){
   //text argument is what you want
});

and if it won't work try if your browser can open the file. if it could you'd better try ajax method in jQuery if not you might have some problems regarding permissions or somethings like that in you application server.

answered Dec 5, 2013 at 12:45

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

3 Comments

aborted Over a year ago

This alternative gave me the result as above, I could use the HTML inside the anonymous function, but couldn't concatenate its content to an outer variable. My code looks like this: pastebin.com/yWj8cLN0

Mehran Hatami Over a year ago

first of all you do not need to do var html = String(text); cause text is already a String. as far as it is an ajax call when you call jQuery.get it takes some time for browser to actually get your file from server, then once it is done its the then(...) responsibility to take the next step and call your callback function. put your next step's code (console.log(template); // Does not work) inside a new function and call it in your callback. I have changed your code in this jsfiddle sample, check this out and your problem is solved: DEMO

the_prole Over a year ago

Doesn't this violate the cross origin policy?

Collectives™ on Stack Overflow

Reading a file into a string in jQuery/JS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related