Openlayers循环遍历json数组并输出结果为javascript

时间:2012-10-08 08:26:45

标签: javascript jquery json openlayers

使用json存储数据库连接代码的Connection.php文件:

<?php
    $username = "root";
    $password = "";
    $database = "roadmap";
    $url = "localhost";

    $con = mysql_connect($url, $username , $password);
    if (!$con) {
       die('Could not connect:' . mysql_error());
    }

    mysql_select_db($database, $con) ;
    $data = array();
    // query your DataBase here looking for a match to $input
    $query = mysql_query("SELECT * FROM students");
    while ($row = mysql_fetch_assoc($query)) {
       $json = array();
       $json['Id'] = $row['Id'];
       $json['Lon'] = $row['Lon'];
       $json['Lat'] = $row['Lat'];
       $data[] = $json;
    }
    header("Content-type: application/json");
    echo json_encode($data);
    mysql_close($con);
?>

在单独的文件index.php中:

$.getJSON("connection.php", function(data) {
    addMarker( data[0].Lon,data[0].Lat ,data[0].desc);
    addMarker(-0.13264,51.50918 , );
    addMarker( -0.12498,51.50807 , );
    center = bounds.getCenterLonLat();
    map.setCenter(center, map.getZoomForExtent(bounds) - 1);
    zoom = map.getZoom();   
});

这当前拉出了json数据,我必须使用它来为数据库中的一个部分分配,例如 data [0] .lon 将得到第一个记录的经度条目在数据库中。

因为我将要处理相当多的条目。我想循环遍历json数组然后输出所有记录:

addMarker( RECORD 1 );

addMarker( RECORD 2 );

addMarker( RECORD 3 );

任何人都可以帮助我。

3 个答案:

答案 0 :(得分:1)

使用类似的东西

$.each(data, function(i,row){
  addMarker( row['Lon'],row['Lat'] ,row['desc'])
})

答案 1 :(得分:0)

你可以使用$ .each循环迭代你的json ..试试这个

试试这个

function(data){

    $.each(data, function(i){

        console.log('Record ' + i + ' : Longitude - ' + data[i].Lon + '  . Latitude  - ' + data[i].Lat + '. Description - ' + data[i].desc    )
    });
}

Check FIDDLE

答案 2 :(得分:0)

您可以使用for循环:

$.getJSON("connection.php", function(data) {
  for(var i = 0; i < data.length; ++i) {
    addMarker(data[i].Lon, data[i].Lat, data[i].desc);
  }
  addMarker(-0.13264,51.50918 , );
  addMarker( -0.12498,51.50807 , );
  center = bounds.getCenterLonLat();
  map.setCenter(center, map.getZoomForExtent(bounds) - 1);
  zoom = map.getZoom();
}); 

或者像其他答案一样使用jQuery each函数。