通过 AJAX 调用在 div 中显示 JS 数组

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...

我的数组的值是name、points、latitude和longitude坐标，如上图所示。

问题是我无法在我的 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);
}});