My latest project involved creating two new files within a folder titled "hello". These files are named index.html and jsontext.txt.
The contents of index.html look like this:
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
</head>
<body>
<p id="demo"></p>
<script>
var a="";
var b="";
var xmlhttp=new XMLHttpRequest;
var url="hello/jsontext.txt";
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
var values=JSON.parse(xmlhttp.responseText);
a=values.name;
b=values.pwd;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
document.getElementById("demo").innerHTML=a+" "+b;
</script>
</body>
</html>
Now, let's take a look at the content of jsontext.txt:
{"name":"Prasad","pwd":"123"}
After completing these steps, I decided to move the entire "hello" folder to the tomcat webapps directory. Once Tomcat was up and running, I attempted to access the page by typing localhost:8080/hello/index.html. However, despite the page loading successfully, the values were not being displayed. Can anyone provide guidance on how to properly retrieve data from JSON using JavaScript?
I understand that this issue may seem trivial to some, but as a beginner in coding, every step is part of the learning process. Any assistance would be greatly appreciated.
Edit
<!DOCTYPE html>
<html>
<head>
<title>Track Page</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVD0ngfhOFs5rnww7UFyz9rN6UznOIZ1U&callback=initMap"
async defer></script>
<script>
var http=new XMLHttpRequest();
var url="jsontext.txt";
var marker;
var user_lat,user_lng;
function initMap() {
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
var coordinates=JSON.parse(http.responseText);
user_lat=coordinates.latitude;
user_lng=coordinates.longitude;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: user_lat, lng: user_lng},
zoom: 8
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
label:'Driver1',
position: {lat: user_lat, lng: user_lng}
});
marker.addListener('click', toggleBounce);
}
}
http.open("GET",url,true);
http.send();
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</body>