如何在JavaScripts中打印数组

时间:2017-01-30 04:50:57

标签: javascript php html

我想在浏览器的下面打印值

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的 lat lng 数据打印中获得价值如何才能解决这个问题?

我希望这个显示在地图中,可以像这样使用它。

谢谢,

4 个答案:

答案 0 :(得分:2)

首先,这是一个PHP数组。因此,您无法直接注入JavaScript数组。

我也不知道你正在使用哪个地图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>

结果enter image description here

的屏幕截图

答案 1 :(得分:1)

尝试在控制台栏中打印:

console.log(Array Name);

答案 2 :(得分:1)

在jquery中,您可以使用此选项执行此操作:

1

在html代码中添加ul,其中包含以下代码,您希望在浏览器中打印值:

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. 
        });

答案 3 :(得分:1)

假设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>