[Exist-open] Storing data retrieved javascript fetch command into global variable

SourceForge Headquarters 1320 Columbia Street Suite 310 San Diego, CA 92101 +1 (858) 422-6466

If I could use the await command, I would do so.  But when I use the await
command, I get the following error in the eXist database:  async functions
are only available in es8.  And I don't know how to set eXist so it will
use es8.  But I digress.

What I want to do is use one function to retrieve data in a .json file and
then use another function to store data from the JSON file into global
variables.  Then I will use those variables to set attributes of SVG
objects.  But I'm doing something wrong and I don't know what I'm doing
wrong.  Here is my code so far:

My HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="
http://www.w3.org/2000/svg" xmlns:xs="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="
http://www.w3.org/1999/xhtml SVG_Bezier_Curve_Webpage_XML_Schema.xsd">
    <head>
         <title>SVG_Diagonal_Line</title>
         <link rel="stylesheet" type="text/css" href="
http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.css
"/>
         <script language="javascript" src="
http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.js
"/>
    </head>
    <body onload="Store_Data()">
         <div id="Button_Box">
              <input type="text" id="Data_Text"/>
         </div>
         <div id="SVG_Position">
              <svg:svg id="My_SVG" height="500px" width="600px">
              <svg:line id="Diagonal_Line_1" x1="300px" x2="395px"
y1="200px" y2="300px"/>
              <svg:line id="Diagonal_Line_2" x1="500px" x2="405px"
y1="200px" y2="300px"/>
              <svg:rect id="Base_Rectangle"/>
              <svg:ellipse id="Germanium_Ellipse"/>
              <svg:ellipse id="Battery_1_Bottom" rx="20" ry="10" cx="250"
cy="350" fill="green" stroke="black" stroke-width="3"/>
              <svg:rect id="Battery_1__Body" x="230px" y="300px"
width="40px" height="50px" stroke="black" stroke-width="3" fill="green"/>
              <svg:ellipse id="Battery_1_Top" rx="20" ry="10" cx="250"
cy="300" stroke="black" stroke-width="3"/>
              <svg:rect id="Battery_2_Body" x="530px" y="300px"
width="40px" height="50px" stroke="black" stroke-width="3" fill="green"/>
              <svg:path id="Battery_2_Bottom" d="M 530,350 A 20,10 0,0,0
570,350" stroke="black" stroke-width="3" fill="green"/>
              <svg:ellipse id="Battery_2_Top" rx="20" ry="10" cx="550"
cy="300" stroke="black" stroke-width="3"/>
              </svg:svg>
         </div>
    </body>
</html>

My CSS Code:

#Diagonal_Line_1{
position:absolute;
stroke: #FFD700;
stroke-width: 3;
fill: none;}
#Diagonal_Line_2{
stroke: #FFD700;
stroke-width: 3;
fill: none;}
#Data_Text{
position: absolute;
top: 50px;
left: 300px;
height: 50px;
width: 300px;}
#My_Svg{
position: absolute;
top: 300px;
left: 200px;
height: 500px;
width: 500px;}
#Button_Box{
position: absolute;
left: 150px;}
#Base_Rectangle{
position: absolute;
height: 15px;
width: 100px;
fill: #b87333;
stroke: black;
stroke-width: 2;}
Germanium_Ellipse{
position: absolute;
fill: #d5d5d7;
stroke: blue;
stroke-width: 2;}

My Javascript Code:

var Retrieved_Data;
var Rectangle_X_Coordinate;
var URL;
var Rectangle_Object;
var Rectangle_Y_Coordinate;
var Germanium_Object;
var Germanium_X_Radius;
var Germanium_Y_Radius;
var Germanium_X_Center;
var Germanium_Y_Center;
var Set_Attributes;

function Retrieve_Data(){

        URL = '
http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Diagonal_Line.json
';

         fetch(URL)
             .then ((res) => response.json());

}

function Store_Data() {

        Retrieved_Data = Retrieve_Data();

            document.getElementById("Data_Text").value =
data.Diagonal_Lines.Diagonal_Line_2.First_X1_Coordinate;
            document.getElementById("Data_Text").value =
data.Diagonal_Lines.Base_Rectangle.Rectangle_Y_Coordinate;
            Rectangle_Object = document.getElementById('Base_Rectangle');
            Germanium_Object = document.getElementById('Germanium_Ellipse');
            Rectangle_X_Coordinate =
JSON.stringify(Retrieved_Data.Rectangle_X_Coordinate);
            Rectangle_Y_Coordinate =
JSON.stringify(data.Diagonal_Lines.Base_Rectangle.Rectangle_Y_Coordinate);
            Germanium_X_Radius =
JSON.stringify(data.Diagonal_Lines.Germanium_Ellipse.Germanium_X_Radius);
            Germanium_Y_Radius =
JSON.stringify(data.Diagonal_Lines.Germanium_Ellipse.Germanium_Y_Radius);
            Germanium_X_Center =
JSON.stringify(data.Diagonal_Lines.Germanium_Ellipse.Germanium_X_Center);
            Germanium_Y_Center =
JSON.stringify(data.Diagonal_Lines.Germanium_Ellipse.Germanium_Y_Center);
            document.getElementById("Data_Text").value =
Rectangle_X_Coordinate;

    }

function Draw_Objects(){

            Draw_Objects(Rectangle_X_Coordinate, Rectangle_Y_Coordinate);
            document.getElementById("Data_Text").value =
Rectangle_X_Coordinate;

            Rectangle_Object.setAttribute('x', Rectangle_X_Coordinate);
            Rectangle_Object.setAttribute('y', Rectangle_Y_Coordinate);
            Germanium_Object.setAttribute('rx', Germanium_X_Radius);
            Germanium_Object.setAttribute('ry', Germanium_Y_Radius);
            Germanium_Object.setAttribute('cx', Germanium_X_Center);
            Germanium_Object.setAttribute('cy', Germanium_Y_Center);
            Germanium_Object.style = "fill: #d5d5d7; stroke: black;
stroke-width: 3;"

And my JSON Data:

{"Diagonal_Lines": {
     "Diagonal_Line_1":
          {"First_X1_Coordinate": "200px",
          "Second_X1_Coordinate": "295px",
          "First_Y1_Coordinate": "200px",
          "Second_Y1_Coordinate": "300px"},
       "Diagonal_Line_2":
           {"First_X1_Coordinate": "400px",
           "Second_X1_Coordinate": "305px",
           "First_Y1_Coordinate": "200px",
           "Second_Y1_Coordinate": "300px"},
        "Base_Rectangle":
           {"Rectangle_X_Coordinate": 350,
           "Rectangle_Y_Coordinate": 300},
   "Germanium_Ellipse":
       {"Germanium_X_Radius": 90,
        "Germanium_Y_Radius": 25,
        "Germanium_X_Center": 400,
        "Germanium_Y_Center": 340},
    "Battery_1_Bottom":
       {"Battery_1_X_Radius": 20,
        "Battery_1_Y_Radius": 10,
        "Battery_1_X_Center": 250,
        "Battery_1_Y_Center": 350},
    "Battery_1_Body":
       {"Battery_1_X": 230,
        "Battery_1_Y": 300},
    "Battery_2_Top":
       {"Battery_2_X_Radius": 20,
        "Battery_2_Y_Radius": 10,
        "Battery_2_X_Center": 250,
        "Battery_2_Y_Center": 350},
    "Battery_2_Body":
       {"Battery_2_X": 530,
        "Battery_2_Y": 300}}}

[Exist-open] Storing data retrieved javascript fetch command into global variable

eXist-db is a feature rich Open Source native XML database

[Exist-open] Storing data retrieved javascript fetch command into global variable