Using JSON Data for Live Information

Using JSON Data for Live Information

Hi,

i need help. 

At the moment i have this on my site dashboard.php

  2. $(function() {
  3. $.ajax({
  4.     type: 'POST',
  5.     url: 'inc/elevators.php',
  6.     dataType: 'json',
  7.     success: function(data) {       
  8.         console.log(data);
  9. }
  10. });
  11. });


And my elevators.php has this result


  2. [
  3. {
  4. "equipmentnumber":10015810,
  5. "type":"ELEVATOR",
  6. "description":"zu Gleis 6/7",
  7. "geocoordX":6.7941232,
  8. "geocoordY":51.2202587,
  9. "state":"ACTIVE",
  10. "stateExplanation":"available",
  11. "stationnumber":1401
  12. },
  13. {
  14. "equipmentnumber":10015811,
  15. "type":"ELEVATOR",
  16. "description":"zu Gleis 4/5",
  17. "geocoordX":6.7938916,
  18. "geocoordY":51.2203696,
  19. "state":"ACTIVE",
  20. "stateExplanation":"available",
  21. "stationnumber":1401
  22. },
  23. {
  24. "equipmentnumber":10015812,
  25. "type":"ELEVATOR",
  26. "description":"zu Gleis 13/14 (S-Bahn)",
  27. "geocoordX":6.7948481,
  28. "geocoordY":51.2200044,
  29. "state":"ACTIVE",
  30. "stateExplanation":"available",
  31. "stationnumber":1401
  32. },
  33. {
  34. "equipmentnumber":10015813,
  35. "type":"ELEVATOR",
  36. "description":"zu Gleis 17/18",
  37. "geocoordX":6.7952645,
  38. "geocoordY":51.2197097,
  39. "state":"ACTIVE",
  40. "stateExplanation":"available",
  41. "stationnumber":1401
  42. },
  43. {
  44. "equipmentnumber":10015805,
  45. "type":"ELEVATOR",
  46. "description":"zu Gleis 19/20",
  47. "geocoordX":6.7954912,
  48. "geocoordY":51.2196009,
  49. "state":"INACTIVE",
  50. "stateExplanation":"under maintenance",
  51. "stationnumber":1401
  52. },
  53. {
  54. "equipmentnumber":10015806,
  55. "type":"ELEVATOR",
  56. "description":"zu Gleis 11/12 (S-Bahn)",
  57. "geocoordX":6.7946775,
  58. "geocoordY":51.2200853,
  59. "state":"ACTIVE",
  60. "stateExplanation":"available",
  61. "stationnumber":1401
  62. },
  63. {
  64. "equipmentnumber":10015807,
  65.                  "type":"ELEVATOR",
  66. "description":"zu Gleis 15/16",
  67. "geocoordX":6.7950265,
  68. "geocoordY":51.2198242,
  69. "state":"ACTIVE",
  70. "stateExplanation":"available",
  71. "stationnumber":1401
  72. },
  73. {
  74. "equipmentnumber":10015809,
  75. "type":"ELEVATOR",
  76. "description":"zu Gleis 9/10",
  77. "geocoordX":6.7943761,
  78. "geocoordY":51.2201368,
  79. "state":"ACTIVE",
  80. "stateExplanation":"available",
  81. "stationnumber":1401
  82. }
  83. ]

On my dashboard.php i have an unordered list with elevators.

  1. <span class="badge badge-lg badge-danger">TRACK 4</span> <-- state=INACTIVE
  2. <span class="badge badge-lg badge-primary">TRACK 10</span> <-- state=ACTIVE
  3. <span class="badge badge-lg badge-danger">TRACK 19</span> <-- state=INACTIVE
  4. <span class="badge badge-lg badge-primary">TRACK 16</span> <-- state=ACTIVE
The order is random every day

Now i want to change the badge from danger to primary when the elevator has the state = ACTIVE and from primary to danger when the elevator has the state = INACTIVE

The Ajax Function should check this every 30 seconds.

I don't know how to do this all.

Thanks

Dennis