0

I am building a program that takes an excel file as an upload, parses specific text, and then appends that text (or related information) to the body of my html.

One part of my program takes a URL as an input and finds the final URL (the final landing page after redirects). One way I found to do this is to use responseURL property of XMLHttpRequest. This currently takes place inside a for loop. I found that if I tried to append this directly to the console (sans promises), it would appear blank (I believe because ResponseURL is asynchronous and had not finished by the time I tried to append). So I found promises as a potential solution. My problem is that I do not know how to properly implement the promise when it is part of a for loop.

To clarify, I have a list of URLs in an array. I then run through the URLS one at a time, pulling out information (this is where I used responseURL), I then append that information to the body of my HTML, and then move onto the next URL to do the same thing. I've tried various approaches but they all break my program in different ways.

My goal here is to run responseURL asynchronously using a promise and append the result to the html once it is done. Here is the code as I currently have it implemented:

Response URL Function

function finalURLGrabber(ID) {
    return new Promise(function(resolve) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', ID, true);
        xhr.onload = function() {
            resolve(xhr.responseURL);
        };
        xhr.send(null);

    });
}

code within the for loop

 $('#body').append(Image Source</h2><div class="imageSource content">' + finalURLGrabber(imageSource).then(function(value) {
                    return value;
                }) + '</div></div>');

When I run the function, what appends to the body is '[object Promise]' instead of the final URL.

My questions are as follows:

  1. Are promises the right thing to use in this situation?
  2. If they are, how do I implement them properly within a for loop?
ZDROM
  • 1
  • 1
  • Looks like you're using a library because of the `$('#body')...` part. Maybe jQuery? – Andreas May 31 '16 at 15:38
  • Hey @Barmar , My problem is that because I need to append the final URLS in a specific order, I cannot include the .append portion as part of the function within .then. When I do that instead of getting the final URL in line with all of the other related information, what I get is an append of all URLs in the loop appended to the bottom of the page. So instead of having: URL1 Value1A Value1B FInalURL1 URL2 Value2A Value2B FInalURL2 I get URL1 Value1A Value1B URL2 Value2A Value2B FInalURL1 FInalURL2 – ZDROM May 31 '16 at 17:15
  • The simplest solution to that is to not use a `for` loop. Send the next AJAX request in the callback function of the previous one. – Barmar May 31 '16 at 17:54
  • @ZDROM You can use `Promise.all` to wait for a list of promises to resolve (one promise per request). Then after that it done, you will be given an array of promised results (URLs in your case), which you can iterate over as normal. See http://stackoverflow.com/questions/28066429/promise-all-order-of-resolved-values for example usage of `Promise.all`. Also see https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html for a big list of assorted Promises knowledge. – Nikita Jun 01 '16 at 05:30

0 Answers0