How to use traccar api to get devices

8.7k Views Asked by At

i have done research on google and many other page, that i can extract the data via traccar api here so i do next research how to use it, and finally find this answer here by mvalverde. At that post, he write some code, like this:

// find All devices  - GET request
var result = HTTP.call(
    "GET",
    'http://your_domain:8082/api/devices/',
    {
        auth: '[email protected]:password' ,
        params: {
        }
    }
);

// add device
var name = 'name your device';
var uniqueId = '122323223232'; // usually this is the device imei
var result = HTTP.post(
    'http://your_domain:8082/api/devices/',
    {
        auth: '[email protected]:password' ,
        data:{
            groupId:null,
            id: null,
            lastUpdate:null,
            status:'',
            name:name,
            uniqueId:uniqueId
        }
    }
);

he said it is javascript, so i try implement in javascript way:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try traccar api</title>
  </head>
  <body>
    <script type="text/javascript">
      var result = HTTP.call(
        "GET",
        'http://103.23.20.176:8082/api/devices/',
        {
          auth: 'email:password' ,
          params: {
          }
        }
      );
      console.log(result);
    </script>
  </body>
</html>

but i get error in console. i suspect that it is not a pure javascript, if it so can u guide me to write the implementation using javascript. so anyone can you help me solve this problem.

ps : i am still rookie in js field

== UPDATE ==
thanks to anton tananaev, i solve this problem, like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try traccar api</title>
  </head>
  <body>
    <script src="js/jquery-2.2.2.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      $.ajax({
        type: 'get',
        url: 'http://103.23.20.176:8082/api/devices/',
        headers: {
            "Authorization": "Basic " + btoa("admin:admin")
        },
        success: function (response) {
            console.log(response);
        }
      });
    </script>
  </body>
</html>

and 1 question again, how to post data? i try like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try traccar api</title>
  </head>
  <body>
    <script src="js/jquery-2.2.2.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = "Bus 2";
      var uid = "1212321233";
      $.ajax({
        type: 'post',
        url: 'http://103.23.20.176:8082/api/devices/',
        headers: {
            "Authorization": "Basic " + btoa("email:pass")
        },
        data:{
          id:null,
          name:name,
          uniqueId:uid,
          groupId:null,
          status:'',
          lastUpdate:null
        },
        success: function (response) {
            console.log(response);
        }
      });
    </script>
  </body>
</html>

but i get status code 415 unsupported media type. what i miss in my code?

== CLOSED ==
final code for the next question is here,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try traccar api</title>
  </head>
  <body>
    <script src="js/jquery-2.2.2.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      var name = "Bus 3";
      var uid = "1243232133";
      $.ajax({
        type: 'post',
        url: 'http://103.23.20.176:8082/api/devices/',
        headers: {
            "Authorization": "Basic " + btoa("email:pass")
        },
        contentType:"application/json",
        data:JSON.stringify({
          name:name,
          uniqueId:uid
        }),
        success: function (response) {
            console.log(response);
        }
      });
    </script>
  </body>
</html>

thank you, i solved my problem :)

2

There are 2 best solutions below

1
On BEST ANSWER

The HTTP object is not defined. You can use jQuery. Add the library first:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Then do an API call. Something like this:

$.ajax({
    type: 'get',
    url: 'http://103.23.20.176:8082/api/devices/',
    headers: {
        "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
    },
    success: function (response) {
        console.log(response);
    }
});

To post data you can send a post request like this:

var data = {
    name: 'Test',
    ...
}

$.ajax({
    type: 'post',
    data: JSON.stringify(data),
    contentType: 'application/json',
    ...
});
1
On

I have problems with CORS trying to consume the API through localhost or any other host:

Failed to load https://xxx.xxx.com.br/api/devices/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access.

jquery.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://xxx.xxx.com.br/api/devices/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Have you tried doing anything like this?