使用JavaScript循环JSON并创建动态HTML表

Question

我正在尝试从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; } 

Answer 1

问题是您的<tr>标记。

content += '<tr><td><b>' + sitename + '</b> - ' + cameraPostion + '</td>';
content += '<td><a href =' + imgURL + ' target="_blank"><center><img src=' + imgURL +' class="imgRWIS" height="125" width="200"></center></td></tr>';

<tr>和</tr>的内容<tr>一行。 <td>和</td>的内容<td>一列。

Answer 2

据我了解，这就是你想要的

 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 class="table-location"><tbody>'; content += '<tr><th class="table-header">'; content += '<center>Images</center></th></tr>'; var tempSiteNumber = features[0].attributes.SITE_NUMBER; content += '<tr>'; content += '<tr><th class="table-header">'; content += '<center>' + features[0].attributes.RPUID_NAME + '</center></th></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 (tempSiteNumber != site_number) { //then create a new row tempSiteNumber = site_number; content += '</tr>'; content += '<tr>'; content += '<tr><th class="table-header">'; content += '<center>'+sitename+'</center></th></tr>'; } //otherwise everythind goes side to side content += '<td>' + cameraPostion; content += '<div><a href =' + imgURL + ' target="_blank"><center><img src=' + imgURL +' class="imgRWIS" height="125" width="250"></center></div></td>'; } content += '</tbody></table>'; document.write(content) return content; } window.onload = createLocationTable(); 

 body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } .table-header { background: #D07D0E; } .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; } 

 <!doctype HTML> <html> <head> <script src="test.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> </body> </html> 

您要做的就是管理不同的“名称”，如果名称不同则跳过一行，否则所有内容都在同一行

编辑

为了对图像具有标题，您必须使用像Div这样的显示块容器。

解决了所有问题。