0

I am creating a few web pages that use the same large set of data, and it takes a few seconds to load and be processed. So it only has to load & process once, I put the loading in an external .js script, and assign the resulting array to a variable that I then could use in the other pages that reference that script.

Let's call the external script that loads the data external.js and one file that uses the data index.html. index.html has script tags with src="external.js" followed by script tags containing page-specific javascript.

How can I ensure that the index.html script waits for external.js to finish, or at least waits for the data portion to finish? I tried enclosing the code in $(function() { ... }); which is supposed to wait until the page loads, but it didn't work. I can see via console.log that it executes index.html before it finishes external.js.

Is there another strategy I can try to ensure the external.js is completely done before the javascript in index is executed?

Added info:

The external.js is kinda long and I'd rather not post it all, just the relevant parts. In index.html and the other pages to come, I will do a lot of stuff with the data so I want it as small as possible.

External.js uses d3's json() function (here is the latest incarnation):

json = [];
var loadJson = function() {
    d3.json("data/file.json", function(error, json) { 
        // above file is an array of about 40,000 objects,  ~36MB.
        json = json.filter(function(d) { .. };
        // above filter keep only the objects with certain properties.
        // then I drop the properties I don't care about to reduce the size of the data

        var tempdata = []; 
        json.forEach(function(d, i) {
            tempdata[i] = { 
                "property1thatIwant":d.property1thatIwant,
                // etc.
            };
            json = tempdata;
            console.log(json);

(Imagine all the closing brackets and stuff.)

Then in index, I want to be able to use json as a regular array of objects that I can different things with on each of my pages, but it wasn't letting me. All I'm doing right now in that file is console.log(json). That produces [] in the console, after which I get the correct data for json.

This is not an ajax question. It has nothing to do with ajax.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
punstress
  • 1,177
  • 2
  • 14
  • 26
  • You will need to show the relevant code from external.js - presumably it is doing some asynchronous processing (e.g., Ajax)? Regarding your plan to only load and process once and use a variable from other pages, that's not how client-side script works. When the other pages open the external.js should already be in the browser's cache, but any processing would occur again for each page using it. – nnnnnn Jan 05 '15 at 08:18
  • THIS IS NOT AN AJAX QUESTION. – punstress Jan 05 '15 at 09:11
  • How do I unmark this as duplicate? MY question is not anything like 'How to return the response from an Ajax call?' Obviously my question was not even skimmed by the person who did that. – punstress Jan 05 '15 at 09:14
  • 1
    I agree that your question is not a duplicate of that other one and I've re-opened it for you. However, the `d3.json()` method *is* doing an ajax call. Where is your `loadJson()` method called from? – nnnnnn Jan 05 '15 at 09:20
  • I'm not asking the question the person linked to (how to receive a response or something). Asynchronous != always ajax. – punstress Jan 05 '15 at 09:23
  • 2
    I know that asynch doesn't have to mean ajax. But the `d3.json()` method *does* do an ajax call, doesn't it? The d3 doco page seems to say so without ever actually using the word "ajax" (it talks about XMLHttpRequests, which are essentially the same thing). In any case, to solve your problem I'd suggest updating your `loadJson()` function to take a callback function as a parameter and then call `loadJson()` from your page passing a callback. – nnnnnn Jan 05 '15 at 09:25
  • what kind of callback function? Only problem on next page I call it again and reload and process. Can you not add to comments, but answer instead? – punstress Jan 05 '15 at 09:27
  • Go back a step. Where do you currently call `loadJson()` from? – nnnnnn Jan 05 '15 at 09:28
  • I left that out. It's in external.js after defining loadJson, just a line saying loadJson(). I have tried a couple different ways, that is the latest. – punstress Jan 05 '15 at 09:33

0 Answers0