簡體   English   中英

如何在JavaScript中打印數組

[英]How to print array in JavaScripts

我想在瀏覽器的“響應”下面打印值,

Array
(
  [0] => Array
    (
        [id] => 3
        [name] => Hunter Gatherer
        [address] => Greenwood Plaza, 36 Blue St, North Sydney NSW
        [lat] => -33.840282
        [lng] => 151.207474
        [type] => bar
    )

  [1] => Array
    (
        [id] => 1
        [name] => Love.Fish
        [address] => 580 Darling Street, Rozelle, NSW
        [lat] => -33.861034
        [lng] => 151.171936
        [type] => restaurant
    )

  [2] => Array
    (
        [id] => 5
        [name] => Nomad
        [address] => 16 Foster Street, Surry Hills, NSW
        [lat] => -33.879917
        [lng] => 151.210449
        [type] => bar
    )
)

還有我想使用HTML我怎么能解決這個問題的緯度經度數據打印值?

我希望此顯示在地圖中,有可能像這樣使用。

謝謝,

首先,這是一個PHP數組。 因此,您不能直接注入JavaScript數組。

我也不知道您使用的是哪種Map API,因此無法為您提供確切的解決方案。 但是,如果您遵循以下代碼段,您將會明白。

我所做的是,將編碼數組轉換為PHP中的json字符串,然后將其解析為JavaScript數組,然后對其進行迭代並將結果打印到瀏覽器。

<?php
$a = [  

    [       "id" => 3,
            "name" => 'Hunter Gatherer',
            "address" => 'Greenwood Plaza, 36 Blue St, North Sydney NSW',
            "lat" => -33.840282,
            "lng" => 151.207474,
            "type" => 'bar',
    ],    
    [
            "id" => 1,
            "name" => 'Love.Fish',
            "address" => '580 Darling Street, Rozelle, NSW',
            "lat" => -33.861034,
            "lng" => 151.171936,
            "type" => 'restaurant',
    ],
    [
            "id" => 5,
            "name" => 'Nomad',
            "address" => '16 Foster Street, Surry Hills, NSW',
            "lat" => -33.879917,
            "lng" => 151.210449,
            "type" => 'bar',
    ]
];

?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div id="map-data">

</div>



<script type="text/javascript">
    var arr = JSON.parse('<?= json_encode($a) ?>');

    var container = document.getElementById("map-data");

    arr.forEach(function(e) {

        for(k in e) {
            var p = document.createElement("p");
            var t = document.createTextNode(k+":"+e[k]);
            p.appendChild(t);
            container.appendChild(p);
        }
    });


</script>
</body>
</html>

更新:

如果您使用的是Google地圖,

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="http://maps.google.com/maps/api/js?sensor=false&key=YOUR_API_KEY_HERE" type="text/javascript"></script>
</head>
<body>

<div id="map-data" style="width:500px; height:500px">

</div>



<script type="text/javascript">
    var json_data = '[{"id":3,"name":"Hunter Gatherer","address":"Greenwood Plaza, 36 Blue St, North Sydney NSW","lat":-33.840282,"lng":151.207474,"type":"bar"},{"id":1,"name":"Love.Fish","address":"580 Darling Street, Rozelle, NSW","lat":-33.861034,"lng":151.171936,"type":"restaurant"},{"id":5,"name":"Nomad","address":"16 Foster Street, Surry Hills, NSW","lat":-33.879917,"lng":151.210449,"type":"bar"}]';

    var data = JSON.parse(json_data);

    //use above snippet, retrieve data from php. 


  var map = new google.maps.Map(document.getElementById('map-data'), {
      zoom: 12,
      center: new google.maps.LatLng(-33.85, 151.20),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    data.forEach(function(e){

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(e.lat, e.lng),
        map: map
      });

    });
</script>
</body>
</html>

結果截圖 在此處輸入圖片說明

嘗試在控制台欄中打印:

console.log(Array Name);

在jquery中,您可以使用以下選項進行操作:

arrayName.forEach(function(val) {
console.log(val.lat);
console.log(val.lng);
//if you want to print it then contatenate it. just like add it in ul as in
   //example given below:

 var printit = '<li>Latitude==>'+val.lat+'&nbsp;&nbsp;Longitude==>'+val.latng+'</li>';
   $("#printedvals").append(print);// do whatever you want to do with your html here. 
        });

要在瀏覽器中打印值的以下代碼中,在html代碼中添加ul:

<ul id="printedvals"></ul>

假設var arr是結果數組:

 var arr=[];arr[0]=[]; arr[0]['id'] = 3; arr[0]['name'] = 'Hunter Gatherer'; arr[0]['address'] = 'Greenwood Plaza, 36 Blue St, North Sydney NSW'; arr[0]['lat'] = '-33.840282'; arr[0]['lng'] ='151.207474'; arr[0]['type'] ='bar'; $.each(arr,function(index,value){ console.log(value.lat);//lat console.log(value.lng);//lng send these to map function to plot on map }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM