使用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這樣的顯示塊容器。

解決了所有問題。