Question

我试图在php查询后显示一个ajax调用的值数组。 Chrome控制台向我展示了按照我需要的方式格式化的数组：

[["Fjeldrype",10,66.93786,-53.66025575],
["Isbj\u00f8rn",50,66.938302219,-53.6697265625],
["Hvalros",30,66.943385800,-53.66972494375],
["Fjeldrype",10,66.9514791099,-53.720629459375],
etc...

我的数组的值是名称，分数，纬度和经度坐标，如上所示。

问题是我无法在div中显示 name 值，我只能显示完整的数组，这是我的PHP查询：

$monstersData = array();

try {
    $query = new ParseQuery("Monsters");
    $mArray = $query->find();    

    for ($i = 0;  $i < count($mArray); $i++) {
        // Get Parse Object
        $mObj = $mArray[$i];

        // Get name
        $mName = $mObj->get('name');
        // Get location
        $mLocation = $mObj->get('location');
        $mLat = $mLocation->getLatitude();
        $mLng = $mLocation->getLongitude();
        // Get points
        $mPoints = $mObj->get('points');

        // create array
        $monstersData[] = [$mName, $mPoints, $mLat, $mLng]; 
        ;          
    }
    echo json_encode($monstersData);

这是我在 index.html 中的JS代码：

<script>

$.ajax({
    url: "query-monsters.php", 
    success: function(result){ 
        console.log(result);
        addMonstersOnMap(result);
}});


function addMonstersOnMap(monsters) {

    var centerCoords = new google.maps.LatLng(66.93828964, -53.64523124);

    var mapOptions = {
                zoom: 2,
                scrollwheel: true,
                center: centerCoords,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);

            for (var i =0; i<monsters.length; i++) {
                // HERE'S WHERE I NEED TO SHOW THE NAME VALUE AT INDEX 0 OF EACH ROW OF MY ARRAY:
                document.getElementById("monstersList").innerHTML = monsters[i][0]; 
            }

            var marker, i;
            var infowindow = new google.maps.InfoWindow();

            // Add marker for each Monster
            for (i = 0; i < monsters.length; i++) {

                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(monsters[i][2], monsters[i][3]),
                    map: map,
                    icon: 'assets/images/' + monsters[i][0] + '.png'
                });


                // click function to marker, pops up infowindow
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(monsters[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

            }// end FOR loop

    google.maps.event.addDomListener(window, 'load', initialize);

}

  </script>

不幸的是，我在网页上看到的只是一个空值，如下所示： []

以下是我的页面的屏幕截图：

所以我猜我在从ajax格式化结果数组时做错了...换句话说，我需要在我的JS中获取 monsters 数组的每一行的每一个值功能，如monsters[i][0]或monsters[i][1]等

任何帮助将不胜感激！

Answer 1

问题在于这段代码：

for (var i =0; i<monsters.length; i++) {
    // HERE'S WHERE I NEED TO SHOW THE NAME VALUE AT INDEX 0 OF EACH ROW OF MY ARRAY:
    document.getElementById("monstersList").innerHTML = monsters[i][0]; 
}

在循环的每次迭代中，您将使用该特定值替换monstersList div的整个HTML。正如您所说，您正在使用jQuery，以下内容如何：

var $monstersList = $('#monstersList');
for (var i =0; i<monsters.length; i++) {
    $monstersList.append(monsters[i][0]);
}

虽然这只会将你所有的怪物值连接成一个大字符串。你可能想要每个怪物都有自己的元素，如下所示：

var $monstersList = $('#monstersList');
for (var i =0; i<monsters.length; i++) {
    var $monsterElement = $('<p>').html(monsters[i][0]);
    $monstersList.append($monsterElement);
}

此外，您会发现您的ajax回调只是将一个字符串发送到您的addMonstersOnMap函数而不是您期望的数组。尝试首先解析结果，如下所示：

$.ajax({
    url: "query-monsters.php", 
    success: function(result){ 
        var data = JSON.parse(result);
        console.log(data);
        addMonstersOnMap(data);
}});

从AJAX调用

1 个答案: