从json数据创建HTML表

时间:2016-09-13 05:46:37

标签: javascript jquery python json html5

我正在尝试动态地以表格形式在浏览器上显示JSON数据。我有两个JSON数据。

{"status": "SUCCESS", "jpgname": "/home/demo/UI/public/upload/imgname.jpg", "Actual": "Normal", "Filename": "filename.txt"}

,第二个JSON数据文件是:

{"Age": 33, "Sex": "Male"}

我想将两个JSON数据合并到单个表中。问题是JSON数据都是python脚本的输出。 Python脚本将 n 数量的文本文件作为输入,并生成JSON作为输出。我面临的问题是,表格单元格正在使用第一个JSON数据的所有字段进行更新,例如我已加载的5个文本文件,因此我将获得5个First JSON数据文件和5个Second JSON文件。表首先更新了First json数据文件的所有字段,然后是第二个JSON文件。任何正文都可以帮助我,如何正确解析JSON数据并使用JSON字段值更新表格单元格。我希望第一个和第二个JSON数据位于同一行。带有第二组JSON文件的第二行。

                <table>
                <tr>
                    <th>Thumbnail</th>
                    <th>Actual</th>
                    <th>Status</th>
                    <th>Age</th>
                    <th>Sex</th>
                </tr>
            </table>
       var table = document.createElement('table');
   var obj = JSON.parse(data);

    var tr;
        tr = $('<tr/>');
            tr.append("<td>" + "<img src = /upload/" + obj.Filename + ".jpg" + " alt=img/>" + "</td>");
            tr.append("<td>" + obj.Actual + "</td>");
            tr.append("<td>" + obj.status + "</td>");
            tr.append("<td>" + obj.Age + "</td>");
            tr.append("<td>" + obj.Sex + "</td>");                     
        $('table').append(tr);

0 个答案:

没有答案