Question

我现在正在使用API调用，因此大多数请求都是通过ajax调用完成的。正如您所料，发送到服务器的数据和从服务器接收的数据都是xml数据。我已成功地在注册过程中和发布请求期间动态构建xml数据。通过使用JaxB，我已经在服务器中完成了必要的步骤。

如果用户需要查看ceertain资源，我现在可以从服务器获取xml数据。像以前一样，我使用jaxb将Java对象转换为xml数据，并且我在Javascript的成功函数中获取xml数据。有关将此xml数据转换为用户可查看形式的大量示例和问题。

我的主要目标是使每个功能都变为动态，现在考虑我要向管理员显示用户列表，我可以使用这些示例将我的xml数据转换为表格。

Display JSON Data in HTML Table

populate jquery data table with returned json data

如果我这样做，我会手动编写相同的流程，并根据每个列表视图的表字段进行一些修改。如果我要复制粘贴相同的代码并对10个列表视图进行一些修改，这是一种不好的做法。我希望将xml到表转换作为任意数量的表的通用函数，无论其中存在多少个字段。

我从服务器获取xml数据为String。所以我使用以下代码将其转换为可识别的xmlData。

var xmlData = jQuery.parseXML(data);    //data is the xml String which I'm getting from server

//Converting xmlData into JSON Objects
var containerTag = myTag    //I can get this from - document.getElementById("tableId").name
var output = new Array( );  
var rawData = xmlData.getElementsByTagName(containerTag)[0];
var i, j, oneRecord, oneObject;
for (i = 0; i < rawData.childNodes.length; i++) {
    if (rawData.childNodes[i].nodeType == 1) {
        oneRecord = rawData.childNodes[i];
        oneObject = output[output.length] = new Object( );
        for (j = 0; j < oneRecord.childNodes.length; j++) {
            if (oneRecord.childNodes[j].nodeType == 1) {
            oneObject[oneRecord.childNodes[j].tagName] = oneRecord.childNodes[j].firstChild.nodeValue;    
            }
        }
    }
}

通过将数据显示为console.log(output[0]);，我获取了真实数据。但我搜索使用这些信息在表格中填充它，大多数建议像

那样

.fieldname1
.fieldname2

等等，这不是我期待的。我现在一直在学习Javascript，但是我不知道如何使这个过程对所有表都是通用的，而不管文件是什么。

注意：我使用的是jquery数据表。

我脑子里想到了一个想法。是否可以将Json对象赋予jquery数据表并且它将执行剩余的进程..？

供参考，这是我的xml数据

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Users>
    <user>
        <id>1</id>
        <username>user1</username>
        <email>email1</email>
        <status>active</status>
    </user>
    <user>
        <id>2</id>
        <username>user2</username>
        <email>email2</email>
        <status>active</status>
    </user>
    <user>
        <id>3</id>
        <username>user3</username>
        <email>email3</email>
        <status>inactive</status>
    </user>
</Users>

这是Json对象

Object { id: "1", username: "user1", email: "email1", status: "active" }  //output[0]
Object { id: "2", username: "user2", email: "email2", status: "active" }  //output[1] 
Object { id: "3", username: "user3", email: "email3", status: "inactive" }  //output[2]

Answer 1

正如@epascarello所说，只有一种更简洁的方法是根据输出数组索引创建tr，并根据输出[i] -json中的键创建td＆＃39; s。使用jquery一个例子应该是这样的。

var table = $('<table></table>');
for(var i=0; i < output.length; i++) {
   var tr = $('<tr></tr>');
   for(var key in output[i]) {
     var td = $('<td></td>');
     td.attr('class', key);
     td.text(output[i][key]);
     tr.append(td);
   }
   table.append(tr);
}
$('body').append(table);

此处示例：http://jsfiddle.net/atrifan/4zfs57m8/3

Answer 2

你甚至可以尝试这个

var output = [{id: 1, name: 'Alex', phone: '000'}, {id: 2, name: 'Paul', phone: '010'}];

var stBldr='';
stBldr+='<table border=1>';
$.each(output,function(i,v){
stBldr+='<tr>';
stBldr+='<td>'+$(v)[0].id+'</td><td>'+$(v)[0].name+'</td><td>'+$(v)[0].phone+'</td>';
stBldr+='</tr>';
});
stBldr+='</table>';

var str=$(stBldr);
$('body').append(str);

<强> DEMO

动态地将JSON对象转换为表行

2 个答案: