Tutorial > Retrieving Data

In many cases, your website will need to provide functionality beyond just loading and displaying chemical data. You may need to process input from the user. For instance, your user may use a component to draw a molecule which you will want to send to a JavaScript function or AJAX to your server to calculate a property. To show how to retrieve the data from ChemDoodle Web Components, a SketcherCanvas is initialized below. Draw any molecule, and then press on the Count Atoms and Bonds button below the sketcher. This button will retrieve the Molecule from the sketcher and pass it to the alertMolecule() function that we wrote when learning to load data.

Feel free to continue to change the molecule in the sketcher; the buttons will continue to retrieve the latest molecule and execute functions on it. The method for doing this is actually very trivial. There is a Canvas.getMolecule() function that will return the Molecule data structure owned by the Canvas. Therefore, at any time, you can retrieve the contained Molecule from any Canvas on your webpage. The following source illustrates how the Count Atoms and Bonds button works.

<script>
    //the SketcherCanvas variable on this page has been named "sketcher"
    let mol = sketcher.getMolecule();
    alertMolecule(mol);
</script>

Now you can take the content inside of a Canvas that a user has changed, and do something with it!

Generating Chemical Formats

Most commonly, you will send the Molecule data structure to another JavaScript function you have written. Other times, you may need to send the data to a backend server to execute a function that you could not port to JavaScript, for instance. You will need to then output the Molecule to some chemical format that can be understood by your server.

The ChemDoodle Web Components library natively supports the MDL MOLFile format. Additional file support is available via iChemLabs cloud services (iChemLabs cloud services support all of the chemical formats handled by ChemDoodle desktop). Just use the ChemDoodle.writeMOL() function, as shown in the following example:

<script>
    let mol = sketcher.getMolecule();
    let molFile = ChemDoodle.writeMOL(mol);
    alert(molFile);
</script>

You can execute this function by clicking on the Generate MOLFile (v2000) button below the sketcher. Now you can output the Molecule to a string that can be sent to your server. The ChemDoodle Web Components library supports both v2000 and v3000 connection tables for MOLFiles. For v3000 MOLFile output, simply use the ChemDoodle.writeMOLV3() function instead.

<script>
    let mol = sketcher.getMolecule();
    let molFile = ChemDoodle.writeMOLV3(mol);
    alert(molFile);
</script>

If MOLFiles are not an option, then the ChemDoodle.iChemLabs package may provide preferred functions. This package was introduced when we were learning to load data. If you are an academic organization, we will provide free access to our server resources. Otherwise, our rates are very reasonable, please contact us for options. One very useful format in chemistry is the SMILES format. The SMILES format describes a molecule connection table with a single, concise line of text. You can use the ChemDoodle.iChemLabs.writeSMILES() function to generate a SMILES string from a Molecule as shown in the following example:

<script>
    let mol = sketcher.getMolecule();
    ChemDoodle.iChemLabs.writeSMILES([mol], [], {}, function(smiles){
        alert(smiles);
    });
</script>

You can execute this function by clicking on the Generate SMILES button below the sketcher. The ChemDoodle.iChemLabs.writeSMILES() function takes three parameters, the Molecule to generate the SMILES from, the options parameter and a callback function. Remember, the ChemDoodle.iChemLabs package executes AJAX functions with our server. These are asynchronous calls, so we need to provide a callback function that is executed when the response is received from the server. The response function will be given the SMILES string as a result, so all we do is use the alert() function to see it.

There are many different ways to retrieve chemical data from ChemDoodle Web Components to be sent to your server or to other processes that don't have access to the JavaScript variables. Some of the ways were described in this section, including outputting to MOLFile strings and using the ChemDoodle.iChemLabs package. Additionally, feel free to write your own JavaScript functions that convert the Molecule data structure to a string that can be handled by your server. Please remember to abide by the GPL license when modifying or extending ChemDoodle Web Components to work with your own services. If you need any help, feel free to contact us for options for custom development.

Continue to Input Events →