javascript - 使用 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

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

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 这样的显示 block 容器。

好了，所有问题都已解决。