Пройти через массив JSON для создания таблицы

Question

У меня есть массив JSON, который я бы хотел пропустить, чтобы создать таблицу.

TITLE и т. Д., Конечно, будут заголовками таблицы и связанными с ними данными, расположенными под ней.

JSON Результат из PHP файла

[ 
    { 
    "TITLE":"Empire Burlesque", 
    "ARTIST":"Bob Dylan", 
    "COUNTRY":"USA", 
    "COMPANY":"Columbia", 
    "PRICE":"10.90", 
    "YEAR":"1985" 
    },{ 
    "TITLE":"Picture book", 
    "ARTIST":"Simply Red", 
    "COUNTRY":"EU", 
    "COMPANY":"Elektra", 
    "PRICE":"7.20", 
    "YEAR":"1985" 
    } 
] 

PHP

$filterText = "1985";//$_REQUEST["text"]; 

$filename = "xml/xml_cd.xml"; 
$filterHeading = "YEAR"; 
$filterText = "1985";//$_REQUEST["text"]; 

$file = simplexml_load_file($filename); 

$children = $file->children(); 
$firstchild = $children[0]; 
$node = $firstchild->getName(); 

$result = $file->xpath('//'.$node.'['. $filterHeading . '/text()="'.$filterText.'"]'); 

$jsondata = json_encode($result,true); 

print_r($jsondata); 

Я считаю, что решение должно быть в JavaScript, но не вполне может работать, как решить эту проблему, будучи новый для JSON и JAVASCRIPT.

Answer 1

Нравится это - используя jQuery, потому что он делает Ajax и последующую обработку намного проще - обратите внимание, что вам не нужно разбирать XML на сервере и создавать JSON. Вы могли бы просто служить XML для JQuery и имеют аналогичную обработку:

Live Demo

// here is your success from AJAX 

    var tbody = $("<tbody />"),tr; 
    $.each(data,function(_,obj) { 
     tr = $("<tr />"); 
     $.each(obj,function(_,text) { 
     tr.append("<td>"+text+"</td>") 
     }); 
     tr.appendTo(tbody); 
    }); 
    tbody.appendTo("#table1"); // only DOM insertion 

Если вы хотите задать каждое поле:

 tr 
     .append("<td>"+obj.TITLE+"</td>") 
     .append("<td>"+obj.ARTIST+"</td>")  

где разметка я использую

<table id="table1"> 
    <thead></thead> 
</table> 

Результаты:

<table> 
    <thead></thead> 
    <tbody id="table1"> 
     <tr><td>Empire Burlesque</td><td>Bob Dylan</td><td>USA</td><td>Columbia</td><td>10.90</td><td>1985</td></tr> 
     <tr><td>Picture book</td><td>Simply Red</td><td>EU</td><td>Elektra</td><td>7.20</td><td>1985</td></tr> 
    </tbody> 
</table> 

Answer 2

У вас есть массив объектов, поэтому петли массив и целевые свойства, которые вы хотите:

for (var i = 0; i < data.length; i++) { 
    console.log(data[i].title); 
} 

Чтобы построить таблицу, вы должны будете построить HTML внутри цикла и добавить после того, как (быстрый пример):

table += "<th>" + data[i].title + "</th>"; 

Я бы порекомендовал шаблонный двигатель, такой как MustacheJS или Angular.

Answer 3

Построение таблицы из JSON с помощью конкатенации:

function build(target, data, columns) { 
    var head = '', rows = ''; 
    for (int j = 0; j < columns.length; j++) { 

     var cols = ''; 
     for (int i = 0; i < data.length; i++) { 
      cols += '<td>'+data[i][columns[j]]+'</td>'; 
     } 

     head += '<th>'+columns[j]+'</th>'; 
     rows += '<tr>'+cols+'</tr>'; 
    } 

    $(target).html(
     '<table>'+ 
      '<thead>'+head+'</thead>'+ 
      '<tbody>'+rows+'</tbody>'+ 
     '</table>' 
    ); 
} 

Используя это:

var data = [ 
    { 
     "TITLE":"Empire Burlesque", 
     "ARTIST":"Bob Dylan", 
     "COUNTRY":"USA", 
     "COMPANY":"Columbia", 
     "PRICE":"10.90", 
     "YEAR":"1985" 
    },{ 
     "TITLE":"Picture book", 
     "ARTIST":"Simply Red", 
     "COUNTRY":"EU", 
     "COMPANY":"Elektra", 
     "PRICE":"7.20", 
     "YEAR":"1985" 
    } 
] 

build('#mycontainer', data, ['TITLE', 'ARTIST', 'YEAR']); 

приведет ли:

<div id="mycontainer"> 
    <table> 
     <thead> 
      <th>TITLE</th> 
      <th>ARTIST</th> 
      <th>YEAR</th> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Empire Burlesque</td> 
       <td>Bob Dylan</td> 
       <td>1985</td> 
      </tr> 
      <tr> 
       <td>Picture book</td> 
       <td>Simply Red</td> 
       <td>1985</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 4

Мое решение с простой старый JavaScript. Для удобства я добавляю некоторые элементы таблицы в HTML вместо того, чтобы создавать все из JS.

  <table id="people" class='table table-striped'> 
         <thead> 
          <th>id</th> 
          <th>Name</th> 
          <th>Age</th> 
          <th>Email</th> 
          <th>Occupation</th> 
         </thead> 
         <tbody></tbody> 
        </table> 

Тогда в нашем файле JavaScript или JSON имеются некоторые данные.Я создаю завод:

var Person = function Person(id, name,age, email, occupation) { 
    this.id   = id; 
    this.name  = name; 
    this.age  = age; 
    this.email  = email; 
    this.occupation = occupation; 
}; 

Затем я создам данные:

var data = [ 
    new Person(1,'Bill Thompson' , 45,'bill@example.com' , 'Math Teacher'), 
    new Person(2,'Lori Segway' , 22,'lori@example.com' , 'Hair Stylist'), 
    new Person(3, 'Peggy Stiller' , 31, 'peg@example.com' , 'Makeup Artist'), 
    new Person(4, 'Harry Lane' , 62, 'harry@example.com', 'Company Ceo'), 
    new Person(5, 'Michael Lowney', 40, 'mike@example.com' , 'Gung Fu Instructor'), 
    new Person(6,'Paul Byrant' , 56, 'paul@example.com' , 'Web Developer') 
]; 

Grab DOM-элемент, как это:

выходной вар = document.querySelector ('# люди TBODY «);

и заполнить стол контуром forEach.

data.forEach(function (person) { 
    var row = document.createElement('tr'); 
    ['id', 'name', 'age', 'email', 'occupation'].forEach(function (prop) { 
     var td = document.createElement('td'); 
     td.appendChild(document.createTextNode(person[prop])); 
     row.appendChild(td); 
    }); 
    output.appendChild(row); 
}); 

Это все просто. Я использую forEach, потому что считаю, что легче понять, что происходит.