Преобразование объекта JSON в строки таблицы Динамически

Question

Теперь я работаю с API-вызовами, поэтому большинство запросов выполняется через вызов ajax. Как и следовало ожидать, как данные, отправленные на сервер, так и данные, полученные с сервера, будут представлять собой XML-данные. Я успешно смогу динамически строить данные xml во время процесса регистрации и во время почтовых запросов. Используя JaxB, я сделал необходимые шаги на сервере.

Теперь я должен получить данные как xml с сервера, если пользователь должен просмотреть определенный ресурс. Как и раньше, я использую jaxb для преобразования объекта Java в xml-данные, и я получаю XML-данные в успешной функции Javascript. Существует много примеров и вопросов, связанных с преобразованием этих данных xml в пользовательскую форму.

Моя основная цель - сделать каждую функцию Dynamic, Рассмотрим теперь, когда я покажу список пользователей для администратора, я могу использовать эти примеры для преобразования моих данных 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 datatables.

Просто в голове появилась мысль. Можно ли просто дать объекту Json jqery datatables, и он выполнит оставшийся процесс.?

Для справки, это мои данные 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 сказал только уборщик способ заключается в создании ТР динамически на основе индекса выходного массива и td на основе ключей от выхода [i] -json. Пример использования 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