Storing data retrieved javascript fetch command into global variable
Ted Hickox <[email protected]> Mon, 9 Sep 2024 20:22:48 -0500
| Newsgroups | gmane.text.xml.exist |
|---|---|
| Message-ID | <CAAsp6CZbAZuazSb7HRTYnniER+eTHnH0L-928mxBcbxd4uJppQ@mail.gmail.com> |
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 mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/exist-open