Анализ JSON не будет преобразован в массив - PullRequest
0 голосов
/ 05 октября 2018

В моем коде я хочу проанализировать данные JSON и показать информационные окна Google Карт, но когда я конвертирую через функцию JSON.parse() и передаю ее как переменную информацию, информационные окна карт не будут работать должным образом, но когда я использую функцию JSON.parseчтобы преобразовать и отобразить результат в textarea, затем поместить преобразованные значения вручную, он правильно отображает информационные окна

Вот что я возвращаю через AJAX / JSON Raw

[
    "['<div class=\"info_content\"><h3>test 1<\/h3><h4>Contact: 33<\/h4><p>33<\/p><\/div>']",
    "['<div class=\"info_content\"><h3>test 2<\/h3><h4>Contact: 22<\/h4><p>22<\/p><\/div>']",
    "['<div class=\"info_content\"><h3>test 3<\/h3><h4>Contact: 55<\/h4><p>55<\/p><\/div>']"
]

Это то, что мне нужно дляdisplay infowindows

[
    ['<div class="info_content"><h3>test 1</h3><h4>Contact: 33</h4><p>33</p></div>'],
    ['<div class="info_content"><h3>test 2</h3><h4>Contact: 22</h4><p>22</p></div>'],
    ['<div class="info_content"><h3>test 3</h3><h4>Contact: 55</h4><p>55</p></div>']
]

Это моя часть JS, которая создает проблему

//Ajax Success response
var location_box = JSON.parse(response);
var infoWindowContent = location_box;
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;

Полный код JS

<script>
    var markers = [];

    function initMap(location_data, location_box) {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap',
            center: new google.maps.LatLng(54.57951, -4.41387),
        };

        // Display a map on the web page
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        map.setTilt(50);

        // Multiple markers location, latitude, and longitude
        //alert(location_data);
        var markers = location_data;
        //var markers = [['test 1', 25.1212, 55.1535, 5],['test 2', 25.2084, 55.2719, 6],['test 3', 25.2285, 55.3273, 7]];

        var infoWindowContent = location_box;

        // Add multiple markers to map
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;

        // Place each marker on the map  
        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Add info window to marker    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);
        }

        // Set zoom level
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(15);
            google.maps.event.removeListener(boundsListener);
        });

    }

    $(document).ready(function() {
        var location_data;
        $("#mapped").on("change", function() {
            var dataname = $(".selectpicker option:selected").val();
            $.ajax({
                url: "findforwork.php",
                type: "POST",
                data: "searchid=" + dataname,
                success: function(response) {
                    //alert('Success' + response);
                    var str_response = response;
                    var res_new = str_response.split("==============");
                    var location_data = JSON.parse(res_new[0].replace(/\"/g, "").replace(/\'/g, "\""));
                    var location_box = res_new[1]; // Info windows Array will be here
                    $('#infoBx').val(location_box);
                    var mapDiv = document.getElementById('map');
                    google.maps.event.addDomListener(mapDiv, "load", initMap(location_data, location_box));
                }
            }); //End Of Ajax
        }); //End of mapped
    });
</script>

PHP-код для генерации данных JSON

$locations  = array();
$locas      = array();
$infoDialog = array();
if (is_numeric($_POST['searchid'])) {
    $service_id = $_POST['searchid'];
    $query      = "SELECT * FROM tblemployees WHERE FIND_IN_SET($service_id, service)";
    if (!$result = mysqli_query($conn, $query)) {
        exit(mysqli_error($conn));
    }

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_array($result)) {
            // username is already exist 

            $print_info = null;

            $latitude       = $row['ltd'];
            $longitude      = $row['lotd'];
            $person_name    = $row['fullname'];
            $person_id      = $row['id'];
            $person_contact = $row['contact'];
            $person_address = $row['address'];

            $locations[] = array(
                'name' => $person_name,
                'lat' => $latitude,
                'lng' => $longitude,
                'lnk' => $person_id
            );
            $locas[]     = "['" . $person_name . "', " . $latitude . ", " . $longitude . ", " . $person_id . "]";

            $print_info .= '<div class="info_content">';
            $print_info .= '<h3>' . $person_name . '</h3>';
            $print_info .= '<h4>Contact: ' . $person_contact . '</h4>';
            $print_info .= '<p>' . $person_address . '</p>';
            $print_info .= '</div>';

            $infoDialog[] = "['" . $print_info . "']";
        }
    }

    $json_response = json_encode($locas);
    $json_info     = json_encode($infoDialog);
    echo $json_response . "==============" . $json_info;
}

1 Ответ

0 голосов
/ 05 октября 2018

Не ясно, является ли ответ массивом или строкой.Если это массив строк, вы должны проанализировать каждый элемент, например:

var location_box = response.map(x=>JSON.parse(x)); 

Таким образом location_box будет массивом из одного массива элементов.

EDIT :

По вашему коду ответ var является строкой, поэтому сначала проанализируйте его:

var location_box = JSON.parse(res_new[0]).map(x=>JSON.parse(x));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...