Question

我有以下结果，并希望从结果中显示一个html div循环。但是所有尝试都失败了。

<?php   
$location = $_GET['location'];
$checkin = $_GET['check_in'];
$checkout= $_GET['check_out'];
$adult= $_GET['adult'];
$child= $_GET['child'];
$handle = curl_init();
$url = "https://api.sandbox.amadeus.com/v1.2/hotels/search-airport?apikey=Gaois6WPa9VQ7WhxqqfV2XsD7J5gMMHX&location=$location&check_in=$checkin&check_out=$checkout&amenity=RESTAURANT&amenity=RESTAURANT&number_of_results=2";


curl_setopt($handle, CURLOPT_URL, $url);
curl_setopt($handle, CURLOPT_RETURNTRANSFER, true); 
$output = curl_exec($handle); 
curl_close($handle);       
echo $output;
?>

<script>
var data = $output;
for(var i = 0, len = data.length; i < length; i++) {
var temp = '<tr><td>' + data[i].id + '</td>';
temp+= '<td>' + data[i].property_code+ '</td>';
temp+= '<td>' + data[i].property_name+ '</td>';
temp+= '<td>' + data[i].location+ '</td></tr>';
$('table tbody').append(temp));
}
</script>

它确实提供了数组，但未能生成具有相应数据的html表

Answer 1

根据您所提出的问题，假设您实际上是从amadeus api返回有效的json数据，那么以下内容可能会引起您的兴趣。与其使用字符串连接，不如使用传统的DOM操作方法imo，这是一种更好的方法。

正如第一条评论中指出的那样-为什么将PHP和javascript这样混合使用？如果请求是由客户端响应用户以某种形式（例如）选择选项而提出的，并且该请求由javascript / ajax触发，那么我可以理解需要使用javascript来处理响应（但对于静态页面）或传统的表单提交方式，实际上不需要使用javascript。

我使用名为curl的PHP函数获取代码，此处未显示。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>AMADEUS - JSON TO HTML</title>
        <style>
            table{width:100%;font-family:calibri,verdana,arial;display:table; border:1px solid black;background:whitesmoke;}
            th{background:gray;color:white;}
            tr{display:table-row;background:white;}
            tr:nth-of-type(odd){background:whitesmoke;}
            td{padding:0.5rem;margin:0.1rem;display:table-cell;border:1px dotted gray;}
        </style>
        <?php
            /* assign javascript variable with json data */
            echo "
        <script>
            let json=$output;
        </script>";
        ?>
    </head>
    <body>

        <table id='amadeus'>
            <!-- an empty table.. -->
        </table>


        <script>
            /* simple function to add a new table cell */
            const addcell=function(data,parent){
                let td=document.createElement('td');
                    td.innerText=data;
                parent.appendChild( td );
            };

            let tbl=document.getElementById( 'amadeus' );
            let results=json.results;
            let properties=['property_code','property_name','location'];
            console.info( results )

            let tr=document.createElement('tr');
                tbl.appendChild( tr );

            properties.forEach( function( prop ){
                let th=document.createElement('th');
                    th.setAttribute('scope','col');
                    th.innerText=prop;

                tr.appendChild( th );
            });


            results.forEach( function(obj){
                tr=document.createElement('tr');
                tbl.appendChild( tr );

                /* Alternative method to get data into cells */
                addcell( obj.property_code, tr );
                addcell( obj.property_name, tr );
                addcell( [obj.location.latitude, obj.location.longitude ].join(','), tr );


            });
        </script>
    </body>
</html>

上面的

修改后的代码现在生成类似于以下内容：

使用div循环将json数据转换为html

1 个答案: