Отображение базы данных в Leaflet с (JSON, AJAX)

Question

Я получаю этот JSON от DeviceNewController

 public function index(Request $request)
{
    $device_new = Device_new::with(['device']);

    return Device_new::all()->toJson();
}

И когда я написал AJAX в представлении блейда, он показывает мне данные из БД в консоли.

<script>
    var newdev = new XMLHttpRequest();
    newdev.open('GET', '/devices_new');
    newdev.onload = function() {
        console.log(newdev.responseText);
    };
    newdev.send();
</script>

Но мне нужно передать его в скрипте Leaflet и записать все данные на карту (координаты, маркеры, информация об устройстве)

Когда я устанавливаю все в одном скрипте, данных нетв консоли я не могу это исправить.

var newdev = new XMLHttpRequest();
    newdev.open('GET', '/devices_new');
    newdev.onload = function() {
        var coordinates = newdev.responseText;

    for (var i=0; i < coordinates.length; i++) {
        if(coordinates[i].x && coordinates[i].y){
        var marker = L.marker([coordinates[i].x, coordinates[i].y])
        .bindPopup("Device: "+coordinates[i].device_type+'<br>' + "Time: "+coordinates[i].datetime)

        .addTo(map);
        }
    };
    };
    newdev.send();

Я где-то допустил ошибку, это правильно ???

Answer 1

Вы скучаете, поняли Ajax. Ajax - это функция из JQuery, библиотеки JS.

Метод ajax () используется для выполнения запроса AJAX (асинхронный HTTP).

Вы должны добавитьбиблиотеки JQuery к вашему источнику, затем вы можете создать Ajax-вызов.

https://www.w3schools.com/jquery/ajax_ajax.asp

$.ajax({url: "/devices_new", success: function(result){
     //result = JSON.parse(result); // If your result is not a json Object.
     var coordinates = result;

    for (var i=0; i < coordinates.length; i++) {
        if(coordinates[i].x && coordinates[i].y){
        var marker = L.marker([coordinates[i].x, coordinates[i].y])
        .bindPopup("Device: "+coordinates[i].device_type+'<br>' + "Time: "+coordinates[i].datetime)

        .addTo(map);
        }
    }
  },
   error: function(xhr){
      alert("An error occured: " + xhr.status + " " + xhr.statusText);
    }});

});