I want to link with the api but this link (https://api.fm-track.com/object-coordinates-stream.json?version=2&api_key=1g6F9NvaKY4jsnmrLqmzxILIMhTpncwr) every time I try to link it with my site
I can't why
this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "https://api.fm-track.com/object-coordinates-stream.json?version=2&api_key=1g6F9NvaKY4jsnmrLqmzxILIMhTpncwr",
type: "GET",
success: function(result) {
console.log(result);
},
error: function(error) {
console.log(error);
}
});
});
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Your API actually return text/event-stream which is is the official media type for Server Sent Events (SSE)
You can accept SSE like this:
const evtSource = new EventSource("https://api.fm-track.com/object-coordinates-stream.json?version=2&api_key=1g6F9NvaKY4jsnmrLqmzxILIMhTpncwr");
evtSource.onmessage = function(event) {
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
const data = JSON.parse(event.data);
console.log(data);
newElement.textContent = "message: " + data['object_id'];
eventList.appendChild(newElement);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul id="list"></ul>
</body>
</html>For more details:
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events