JavaScript中嵌套函数“类”结构中的变量范围

Question

So I'm in the process of porting a Python application over to Node.js, for various reasons. I've got moderate Javascript knowledge via web development, but have been having some issues with variable scope and (possibly?) some asynchronous calls I'm making.

So, I've got a nested method "xmlToObjectByType" in my DataLoader class that I'm trying to potentially set variables in, based on some matching criteria in a series of XML files. No matter what I do in the method, products never changes from null, and the xml_files.splice() call never works. I'm positive it's a scoping issue (code inside parseString which is inside fs.readFile, which is inside forEach, etc etc) but I haven't been able to find much luck figuring out exactly why or how to correctly get the value set.

As a last ditch I tried getting the result in a callback set on xmlToObjectByType, which gets me the value I'm looking for, but I still can't set the value of products from the callback. I'm sure it has to do with scoping, but I'm at a bit of a loss. I'm sure this is a really simple thing I'm overlooking, but it's been a long time since I've dove this deeply into JS. Which isn't very deep at all. Any thoughts on what I'm doing wrong here, aside from the probably terrible logic flow?

Note that this is a simplified version where I took out the checks for a few other XML file types, for legibility reasons.

Code

var fs = require('fs'),
    xml2js = require('xml2js');


export function DataLoader(working_directory){  
  var working_directory = working_directory;
  var xml_files = [];
  var products = null;
  var data = null;

  var xmlToObjectByType = function(type, setValue) {
    xml_files.forEach(function(file, index) {
        var parser = new xml2js.Parser();
        fs.readFile(working_directory + '/' + file, function(err, data) {
            parser.parseString(data, function (err, result) {
                if (result.Products.Product) {
                    var result_object = result.Products.Product;
                    // check if we've got at least one row, else return false
                    if (result_object.length > 0) {

                        // products specific check
                        if (type == "products") {
                            // identify products XML with artist tag
                            if (result_object[0].Artist) {
                                // this is a products XML file, so pop this file from xml_files, return object
                                xml_files.splice(index, 1);
                                setValue(result_object);
                            } 
                        }

                    } else {
                        // no rows in object
                        setValue("no rows");
                    }
                } else {
                    // ROW object isn't set, malformed XML
                    setValue("malformed XML");
                }
            });
        });
    })
  }

  // check selected directory for XML files
    fs.readdir(working_directory,function(err,files){
        if(err) throw err;
        files.forEach(function(file){
            // do something with each file HERE!
            if (file.split('.').pop() == "xml") {
                xml_files.push(file);
            }
        });

            // if they don't exist return and send message
            if (xml_files.length < 1) {
                var status = {status: "error", message: "There are no XML files in the directory you selected."};
            } else {

                // process further
                xmlToObjectByType("products", function(result) {
                    products = result;
                });


                data = {"products": products};

                // products always has the value null here
                console.log(data);
            }

            return status;
     });
};

I'm calling it via

import { DataLoader } from './my_module';
DataLoader('/Path/To/XML');

And a simplified example of an XML file (i think i did this right)

<?xml version="1.0" encoding="UTF-8" ?>
<Products>
    <Product>
        <Artist>Test</Artist>
        <Title>Test Title</Title>
        <Description>Maecenas faucibus mollis interdum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</Description>
    </Product>
    <Product>
        <Artist>Test</Artist>
        <Title>Test Title</Title>
        <Description>Maecenas faucibus mollis interdum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</Description>
    </Product>
    <Product>
        <Artist>Test</Artist>
        <Title>Test Title</Title>
        <Description>Maecenas faucibus mollis interdum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</Description>
    </Product>
    <Product>
        <Artist>Test</Artist>
        <Title>Test Title</Title>
        <Description>Maecenas faucibus mollis interdum. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</Description>
    </Product>
</Products>

Answer 1

this part here:

xmlToObjectByType("products", function(result) {
    products = result;
});

data = {"products": products};
console.log(data);

the callback to xmlToObjectByType I am assuming is asynchronous, therefore:

data = {"products": products};
console.log(data);

this will run before:

products = result;

which means when you set a value to data it will be undefined. Try:

xmlToObjectByType("products", function(result) {
    products = result;
    data = {"products": products};
    callback(status, data); // see below
});

and DataLoader will have to now take a callback if you want to access data after calling DataLoader :

function DataLoader(working_directory, callback)

then where you call DataLoader you will need to do:

DataLoader(.., function(status, data) {
  // do stuff with status and data
})

Answer 2

Macmee is correct in that your data and product variables are only changing within the scope of the xmlToObjectByType callback, which is being called asynchronously (the next tick of the processor, after you've requested the result to be logged to console).

But I think your main problem is not-so-much your handling of the data, but at which point in the code you're requesting for feedback about the data.

So, with your current code, products is getting populated with an Object representing the XML, but it's just being populated far after you've asked it to be printed back to you. You can test this theory by placing a simple timed function which will report back the results in half a second:

/* ... code before */

var working_directory = working_directory;
var xml_files = [];
var products = null;
var data = null;

setTimeout(function(){

  console.log(products);

}, 500);

/* code after... */

So, what you really want is a callback for the DataLoader in general:

function DataLoader(working_directory, callback){ 

And call it in your XML parsing callback:

xmlToObjectByType("products", function(result) {
    callback({"products": result});
});

And then call your DataLoader like so:

DataLoader('/Path/To/XML', function(data){ console.log(data) });

With these adjustments to the code, I'm getting this output in my console:

{ products: 
   [ { Artist: [Object], Title: [Object], Description: [Object] },
     { Artist: [Object], Title: [Object], Description: [Object] },
     { Artist: [Object], Title: [Object], Description: [Object] },
     { Artist: [Object], Title: [Object], Description: [Object] }
   ]
}

Obviously I'm making some assumptions about your user-case. But I think this demonstrates how you can navigate the different scopes in asynchronous JavaScript.

Update

Here's a re-write of your application that will collate data from multiple XML files and then callback with the data:

var fs = require('fs'),
    xml2js = require('xml2js'),
    path = require('path');


export function DataLoader (directory, callback) {  

  getXmlFiles( function (files) {

    parseXmlFile(files, callback);

  } );

  function parseXmlFile (files, callback) {

    var parser = new xml2js.Parser();
    var data = {};
    var filesLeft = files.length;

    files.forEach( function(file, i) {

      fs.readFile( path.join(directory, file), function (err, result) {

        parser.parseString( result, function (err, result) {

          if (result.Products.Product) {

            var result_object = result.Products.Product;

            if (result_object.length > 0 && result_object[0].Artist) {

              data[file] = result_object;

            }
          }

          filesLeft--;

          if (!filesLeft)
            callback(data);

        });
      });
    });
  }

  function getXmlFiles (callback) {

    var files = [];

    fs.readdir(directory, function (err, f) {

      if(err) throw err;

      f.forEach( function (file) {

        if (file.split('.').pop() == "xml") {

          files.push(file);

        }
      });

      callback(files);

    });
  }
}

Use it with something like this:

DataLoader( __dirname, function (data) {

  console.log(data);

});