I have red a lot of posts about how to add data to json file and I tried to put it all together and use for my situation, but it's not working. Basically what I do is get data from html file with javascript, then use XMLHttp request to send that data to php file and from php file I am trying to add the data to .json file. Anywho, it is not adding it and I don't know why and where is the problem. My question is about the XMLHttp request. Is it correct? Why not? And about php file. If the problem is in XMLHttp request, would the php file add the data to .json file? I am just trying to get anything in the json file, so i could start thinking about algorithms for making it viable. XMLHttp request is pretty new thing for me. For understanding, here is my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style_mob.css" type="text/css" rel="stylesheet">
<script src="script/jquery.js"></script>
<script src="script/sendData.js"></script>
</head>
<body>
<div id="top">
<h1>Click only in case of an emergency!</h1>
</div>
<div id="divButtons">
<button class="button" id="polizei">Polizei</button>
<button class="button" id="feuerwehr">Feuerwehr</button>
<button class="button" id="krankenwagen">Krankenwagen</button>
</div>
</body>
</html>
sendData.js:
$( document ).ready(function() {
var type;
var latitude;
var longitude;
var currentdate = new Date();
$(".button").click(function(){
type = $(this).attr("id");
var dateTime = "Date: " + currentdate.getDay() + "/"+(currentdate.getMonth()+1)
+ "/" + currentdate.getFullYear() + " time - "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(sendData);
} else {
alert("Geolocation is not supported by this browser.");
}
function sendData(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
var hr = new XMLHttpRequest();
hr.open("POST", "emergencyData.php", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
alert("about to send data to php file");
hr.send("type="+type+"&latitude="+latitude+"&longitude="+longitude+"$dateTime="+currentdate+"");
});
});
emergencyData.php:
<?php
header("Content-Type: application/json");
$type = $_POST["type"];
$latit = $_POST["latitude"];
$longit = $_POST["longitude"];
$dateTime = $_POST["dateTime"];
echo $type;
// Loading existing data:
$json = file_get_contents("emergencyData.json");
$data = json_decode($json, true);
// Adding new data:
$data[0] = array('type' => $type, 'latitude' => $latit, 'longitude' => $longit, 'date' => $dateTime);
// Writing modified data:
file_put_contents('emergencyData.json', json_encode($data, JSON_FORCE_OBJECT));
?>
You have a typo in javascript.
hr.send("type="+type+"&latitude="+latitude+"&longitude="+longitude+"$dateTime="+currentdate+"");
You have a $ at dateTime which should be &
Also I think you wanted &dateTime="+currentdate+"" to be &dateTime="+dateTime. Extra +"" is unnecessary.
And last thing, if you want to keep adding new data instead of overwriting old data, in PHP script use:
$data[] = array('type' => $type, 'latitude' => $latit, 'longitude' => $longit, 'date' => $dateTime);
Otherwise everytime the old JSON data will get replaced by new one.