Как из php файла передать данные в переменную javascript?

Question

[angelzzz]

Через API получаю данные от стороннего сервиса. Структура ответа:

[ { 
        ...     
        “Latitude”: “<Широта>”,
        “Longitude”:    “<Долгота>”,
        ...
} ]

С помощью php файла getdata.php прохожу по массиву и собираю все данные

foreach ($response as $item) {
    $a = "[".$item['Latitude'].",".$item['Longitude']."]," ;   
    $array = $array.$a ;
}

    $list= substr($array, 0, -1);
    echo json_encode($list);

Это список точек, который я хочу отобразить на карте с помощью Яндекс.Карты API.

var myMap = new ymaps.Map('map', {
...
    points = [
        [55.831903,37.411961], [55.763338,37.565466]
    ],
}

Использую вызов через ajax

function showData() { 
        var data="";
        $.ajax({ 
            url: "/GetList.php", 
            data: "", 
            dataType: 'json', 
            success: function(response) {
                var data = response; 
            } 
        }); 
        return data; 
    }
...
var myMap = new ymaps.Map('map', {
...
    points = [
        data
    ],
}

Понимаю, что код неверный, как правильно - не знаю.

1. Как мне передать данные переменной $list в points?
2. Не важный вопрос по корректности кода в php? Он вроде выводит верные данные, но нужно ли делать json_encode и можно ли заменить substr($array, 0, -1); на что-то внутри foreach?

Answer 1

[Кирилл Ушаков]

Так строй карту сразу в блоке success ajax-запроса.

С яндексом не работал, но на примере гугла (из одного рабочего проекта). Данные получил, и тут же с ними и работаю.

$.ajax({
        url: "coords.json",
        dataType: "json",
        async: true,
        success: function(msg){
            google.maps.event.addDomListener(window, 'load', init);
            function init() {
                var mapOptions = {
                    zoom: 2,
                    center: new google.maps.LatLng(42, 10),
                    scrollwheel: false
                };
                var mapElement = document.getElementById('map');
                var map = new google.maps.Map(mapElement, mapOptions);
                setMarkers(map);
                map.addListener('click', function() {
                    if (infowindow) {
                        infowindow.close();
                    }
                });
            }

            function setMarkers(map) {
                for (var n = 0; n < msg.length; n++) {
                    console.group('Path: '+n);
                    for (var i = 0; i < msg[n].length; i++) {
                        var m = i+1;
                        var mrk = msg[n][i];
                        var next_mrk = msg[n][m];

                        var marker = new google.maps.Marker({
                            position: {lat: mrk[1], lng: mrk[2]},
                            map: map,
                            icon: image,
                            title: mrk[0],
                        });
                        Message(marker, mrk[3]);

                        if(next_mrk) {
                            var dashedLine = new google.maps.Polyline({
                                path: [
                                    {lat: mrk[1], lng: mrk[2]},
                                    {lat: next_mrk[1], lng: next_mrk[2]}
                                ],
                                strokeOpacity: 0,
                                icons: [{
                                    icon: line,
                                    offset: '0',
                                    repeat: '6px'
                                }],
                                map: map
                            });
                            console.dirxml(mrk[0]+" - "+next_mrk[0]);
                        } else {                            
                            console.dirxml(msg[n][i][0]);
                        }
                    }
                    console.groupEnd();
                }
            }

            function Message(marker, msg) {
                var infowindow = new google.maps.InfoWindow({
                    content: msg
                });
                marker.addListener('mouseover', function() {
                    this.setIcon(image_hover); this.setZIndex(2);
                    infowindow.open(marker.get('map'), marker);
                });
                marker.addListener('mouseout', function() {
                    this.setIcon(image); this.setZIndex(1);
                    infowindow.close();
                });
                marker.addListener('click', function() {
                    marker.get('map').setZoom(6);
                    marker.get('map').setCenter(marker.getPosition());
                });
            }
        }
    });

Comments

[angelzzz]

не могу сообразить как вставить полученные из php файла данные в js, исполняемом в index.html, в переменную points

[Кирилл Ушаков]

angelzzz: на примере приведенным тобой кода. Когда получил данные от GetList.php, обрабатывай их тут же. без всяких return'ов.

function showData() {
var data="";
$.ajax({
url: "/GetList.php",
data: "",
dataType: 'json',
success: function(response) {
var myMap = new ymaps.Map('map', {
...
points = [
response
],
}
}
});
}

[angelzzz]

Кирилл Ушаков: пустое окно выводится

[Кирилл Ушаков]

angelzzz: где бы полный код файлов глянуть?

[angelzzz]

Кирилл Ушаков: как его можно показать? с php и js?

[Кирилл Ушаков]

angelzzz: ладно. Давай так попробую разжевать.

Есть страница на которой скрипт.

<html>
	<head>
		...
		<script>
			$(function() {
				function showData() {
					$.ajax({
						url: "/GetList.php",
						data: "", 
						dataType: 'json', 
						success: function(response) {
						    var data = response;

						    //Здесь код который строит и выводит карту

						} 
					});
				}

				showData(); // инициализируем функцию
			});
		</script>
		...
	</head>
	<body>
		...
	</body>
</html>

[angelzzz]

Кирилл Ушаков: спасибо! примерно так и сделал

Answer 2

[yociyavi]

Или ajax-запросом или так

$phpVar = '{a: 1, b:2, c:3}';
echo "
<script>
var jsVar = $phpVar;
</script>
";

Comments

[angelzzz]

где это писать? откуда взялось $phpVar ?

[yociyavi]

angelzzz: поправил код

[angelzzz]

yociyavi: я честно говоря не понимаю как это относится к моему вопросу. у меня есть данных в пхп файле, как мне их в переменную засунуть. причем строго определенную переменную points

[angelzzz]

yociyavi: наверное я не написал что points находится в index.html, тогда как phph выполняется в getdata.php

[yociyavi]

angelzzz: переименуйте index.html в index.php и будет работать.
А вообще ajax-запрос само норм решение.

[angelzzz]

yociyavi: как аяксом сделать?

[yociyavi]

angelzzz:

$.ajax({ 
            url: "/GetList.php", 
            data: "", 
            dataType: 'json', 
            success: function(response) {
                var data = response; 
                // вот здесь все и делаем. Если надо, то в другой функции то передаем коллбэк. Если нужна синхронность то используем промисы
            } 
        });

[angelzzz]

yociyavi: спасибо!

Answer 3

[ArturArturov]

или например в атрибут дата, наподобие:

<body  data-you-var-from-php='{"x": 1000, "y": 2000}'>

Comments

[yociyavi]

Тут с кавычками может быть проблема. Не известно какие будут переменной. Да и не комильфо использовать одинарные в html-атрибутах.

[ArturArturov]

как раз такие и работают. сначала одинарные, потом двойные - это если надо передать объект такого типа

[angelzzz]

ArturArturov: наверное я не написал что points находится в index.html, тогда как phph выполняется в getdata.php