【发布时间】：2017-08-11 17:01:32
【问题描述】：
我正在尝试从 REST 端点循环访问 JSON 对象。我已经成功地遍历了 JSON 数组，并根据我从 JSON 对象创建的变量创建了一个动态表。
我遇到的问题是为每个位置创建一个单独的表。例如，我希望每个位置都成为自己的行，并将关联的相机位置及其照片作为单独的单元格。相反，我的表格以一列一排的形式出现。
这是我的代码的样子（请忽略我的业余编码能力，因为我还在学习）:)：
function getJSON(url) {
var resp = '';
var xmlHttp = new XMLHttpRequest();
if (xmlHttp != null) {
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
resp = xmlHttp.responseText;
}
return resp;
}
function getAllLocations() {
gjson = getJSON(
'https://gis.iowadot.gov/public/rest/services/Maintenance/RWIS_Data/FeatureServer/5/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=CAMERA_POSITION%2C+SITE_NUMBER%2C+RPUID_NAME%2C+IMAGE_URL&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=RPUID_NAME+ASC%2C+CAMERA_POSITION+ASC&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&resultOffset=&resultRecordCount=&f=pjson'
);
var parsedJSON = JSON.parse(gjson);
var features = parsedJSON.features;
return features;
}
/*
creates the table.
*/
function getJSON(url) {
var resp = '';
var xmlHttp = new XMLHttpRequest();
if (xmlHttp != null) {
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
resp = xmlHttp.responseText;
}
return resp;
}
function getAllLocations() {
gjson = getJSON(
'https://gis.iowadot.gov/public/rest/services/Maintenance/RWIS_Data/FeatureServer/5/query?where=1%3D1&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&distance=&units=esriSRUnit_Foot&relationParam=&outFields=CAMERA_POSITION%2C+SITE_NUMBER%2C+RPUID_NAME%2C+IMAGE_URL&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=RPUID_NAME+ASC%2C+CAMERA_POSITION+ASC&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&resultOffset=&resultRecordCount=&f=pjson'
);
var parsedJSON = JSON.parse(gjson);
var features = parsedJSON.features;
return features;
}
/*
creates the table.
*/
function createLocationTable() {
var features = getAllLocations();
var site_number = '';
var sitename = '';
var cameraPostion = '';
var imgURL = '';
var date = new Date();
var content = '';
content = '<table align="center">';
content += '<tr><th class="table-header">';
content += '<center>RWIS Images</center></th></tr></table>'
content += '<table><tbody>';
var tempSiteName = features[0].attributes.SITE_NUMBER;
content += '<tr>';
for (var i = 0; i < features.length; i++) {
site_number = features[i].attributes.SITE_NUMBER
sitename = features[i].attributes.RPUID_NAME;
cameraPostion = features[i].attributes.CAMERA_POSITION;
imgURL = features[i].attributes.IMAGE_URL;
//if(tempSiteName.toString().substr(0,tempSiteName.toString().indexOf(' ')) != sitename.toString().substr(0,sitename.toString().indexOf(' ')))
if (tempSiteName != sitename) {
//then create a new row
tempSiteName = sitename;
content += '</tr>';
content += '<tr>';
}
//otherwise everythind goes side to side
content += '<td><center><b><br>' + sitename + '</b> -</br></center><center>' + cameraPostion +'</center>';
content += '<div><a href =' + imgURL + ' target="_blank"><center><img src=' + imgURL +
' class="imgRWIS" height="100" width="150"></center></div></td>';
}
content += '</tbody></table>';
document.write(content)
return content;
}
window.onload = createLocationTable();body {
font-family: Arial, 'Trebuchet MS', Verdana, Helvetica, sans-serif;
}
.table-header {
font-size: 24px;
font-family: Arial, sans-serif;
color: #d46200;
}
.sitename h{
font-size: 20px;
font-family: Arial, sans-serif;
color: #7c9f3d;
}
.table-location {
/* background: #dddddd; */
width: auto;
margin: 10px 0;
font-size: 14px;
border: 1px solid black;
}
.table-location td {
padding: 5px;
}
img.imgRWIS {
background: black;
position: relative;
padding: 1px;
display: block;
margin: 0 auto;
}【问题讨论】：
-
编辑：我更新了代码 sn-p 以反映正确的答案。
标签： javascript json html rest