通过 php URL 从 JSON 对象构建 HTML 表

Posted

技术标签:

【中文标题】通过 php URL 从 JSON 对象构建 HTML 表【英文标题】:Building HTML table from JSON object via php URL 【发布时间】:2013-08-15 17:48:52 【问题描述】:

我在使用我已经由 php 页面生成的 JSON 对象构建 html 表时遇到问题。

我正在从一个电子表格构建我的 JSON 对象,其中包括:Fname、Lname、Ext、Rm。

我的 json.php 网页给了我这个结果:

["fName":"John","lName":"Doe","Ext":"#666","Rm":"C3","id":0,"fName":"Abraham","lName":"Lincoln","Ext":"#917","Rm":"C1","id":1]

所以现在我正在尝试构建一个 html 页面,使用 jquery 用这些数据填充一个表格。 这是我的 index.html 的内容:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
    </script>
</head>
<body>
<div id="stuff"
<table id="userdata" border="1">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Ext</th>
        <th>Room</th>
    </thead>
    <tbody></tbody>
</table>
</div>

<script>
$(document).ready(function()
    $("#userdata tbody").html("");
    $.getJSON("json.php", function(data)
            $.each(data.members, function(i,user)
                var tblRow =
                    "<tr>"
                    +"<td>"+user.fName+"</td>"
                    +"<td>"+user.lName+"</td>"
                    +"<td>"+user.Ext+"</td>"
                    +"<td>"+user.Rm+"</td>"
                    +"</tr>"
                $(tblRow).appendTo("#userdata tbody");
            );
        
    );
);
</script>

编辑: 使用以下代码找到了我的解决方案:

<?php
$json = file_get_contents('collab.json.php');
$data = json_decode($json,true);

echo '<table>';
echo '<tr><th>Username</th><th>Period</th><th>Room</th><th>Next?</th></tr>';

$n = 0;

foreach ($data as $key => $jsons) 
    foreach ($jsons as $key => $value) 
        echo '<tr>';
    echo '<td>'.$data[$n]['username'].'</td>';
    echo '<td>'.$data[$n]['period'].'</td>';
    echo '<td>'.$data[$n]['Rm'].'</td>';
    echo '<td>'.$data[$n]['next'].'</td>';
    echo '</tr>';

    $n++;
 

echo '</table>';
?>

</html>

【问题讨论】:

data.members 中的members 来自哪里?我在你的 json 中的任何地方都看不到它。 您是否使用 Firebug 或其他工具来查看是否/在哪里发生了 javascript 错误?如果没有,我强烈建议您这样做 - 否则您会在黑暗中刺伤。此外,它还可以让您查看 ajax 调用,包括返回的内容,因此您也可以查看那里是否有任何问题。 cale_b,你能给我简要介绍一下为此目的使用 firebug 吗? 【参考方案1】:

假设您提供的 json 是您的 json.php 的唯一输出,您必须稍微更改这一行:

$.each(data.members, function(i,user)

到这里:

$.each(data, function(i,user)

【讨论】:

没有骰子。 php 文件确实只回显了我构建的 JSON 对象 还不如告诉我members 属性来自哪里? 很可能来自我正在学习的教程,我不应该使用它!【参考方案2】:

通常在这些情况下,我将项目添加到数组中,然后加入并附加数组。例如,在你的每个人中。

tblRow = [
  '<tr>',
    '<td>' + user.fName + '</td>',
    '<td>' + user.lName + '</td>',
    '<td>' + user.Ext + '</td>',
    '<td>' + user.Rm + '</td>',
  '</tr>',
].join('\n');

myArray.push(tblRow);

myArray 是循环外的空数组,然后在循环之后将数组内容附加到表中。

希望这会有所帮助!

【讨论】:

我添加了: var myArray = newArray();只是高于我的 $.each 无济于事 newArray();正在引用一个函数。你想要 var myArray = [];这将为您创建空数组。 不走运。正如上面提到的 cal_b 一样,我有一段时间没用过 firebug 了,所以今晚我要启动 firebug。

以上是关于通过 php URL 从 JSON 对象构建 HTML 表的主要内容,如果未能解决你的问题,请参考以下文章

使用 JSON 使用 Javascript 缩短 URL

ReactJS - 从 URL 获取 json 对象数据

htaccess - 从 url 中删除 .php 扩展名

从PHP返回的JSON对象为NULL

通过php从mysql结果创建json对象[重复]

将对象序列化为 JSON