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

我正在尝试从REST端点循环一个JSON对象。我已经成功地迭代了JSON数组，并基于从JSON对象创建的变量创建了一个动态表

我遇到的问题是为每个位置创建一个单独的表。例如，我希望每个位置都是它们自己的行，并且关联的相机位置及其照片作为单独的单元格。相反，我的表显示为一列一行

下面是我的代码的样子（请忽略我的业余编码能力，因为我还在学习）：：

函数getJSON（url）{ var resp=''； var xmlHttp=new XMLHttpRequest（）； if（xmlHttp！=null）{ open（“GET”，url，false）； xmlHttp.send（空）； resp=xmlHttp.responseText； } 返回响应； } 函数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+站点号%2C+RPUID\u名称%2C+IMAGE\u URL&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnExtentOnly=false&orderByFields=Rpud\u NAME+ASC%2C+CAMERA\u位置+ASC&GroupByFields统计=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&resultOffset=&resultRecordCount=&f=pjson' ); var parsedJSON=JSON.parse（gjson）； var features=parsedJSON.features； 返回特性； } /* 创建表。 */ 函数getJSON（url）{ var resp=''； var xmlHttp=new XMLHttpRequest（）； if（xmlHttp！=null）{ open（“GET”，url，false）； xmlHttp.send（空）； resp=xmlHttp.responseText； } 返回响应； } 函数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+站点号%2C+RPUID\u名称%2C+IMAGE\u URL&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnExtentOnly=false&orderByFields=Rpud\u NAME+ASC%2C+CAMERA\u位置+ASC&GroupByFields统计=&outStatistics=&returnZ=false&returnM=false&multipatchOption=&resultOffset=&resultRecordCount=&f=pjson' ); var parsedJSON=JSON.parse（gjson）； var features=parsedJSON.features； 返回特性； } /* 创建表。 */ 函数createLocationTable（）{ var features=getAllLocations（）； var站点_编号=“”； var sitename=''； var cameraposition=''； var imgURL=''； 变量日期=新日期（）； var内容=“”； 内容=''； 内容+=''； 内容+=“RWIS图像” 内容+=''； var tempSiteName=features[0]。attributes.SITE\u编号； 内容+=''； 对于（变量i=0；i'+cameraposition+''； 内容+=''； } 内容+=''； 文件编写（内容） 返回内容； } window.onload=createLocationTable（）

正文{
字体系列：Arial，'Trebuchet MS'，Verdana，Helvetica，无衬线；
}
.表格标题{
字体大小：24px；
字体系列：Arial，无衬线；
颜色：#d46200；
}
.sitename h{
字体大小：20px；
字体系列：Arial，无衬线；
颜色：#7c9f3d；
}
.表格位置{
/*背景：#dddddd*/
宽度：自动；
利润率：10px0；
字体大小：14px；
边框：1px纯黑；
}
.表格位置td{
填充物：5px；
}
img.imgRWIS{
背景：黑色；
位置：相对位置；
填充：1px；
显示：块；
保证金：0自动；
}

问题在于您的标签

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>';

content+=''+sitename+'-'+cameraposition+''；
内容+=''；

和

中的内容组成一行。

和

中的内容构成一列。

问题在于您的

标签

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>';

content+=''+sitename+'-'+cameraposition+''；
内容+=''；

和

中的内容有助于