通過一個JSON數組循環來創建一個表

TITLE等當然是表格的標題和放置在下面的相關數據。

從PHP文件JSON結果

[ 
    { 
    "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。

來源

2014-01-29 user2261755

像這樣 - 使用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>

結果：

使用字符串連接從JSON

<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>

來源

2014-01-29 14:39:16 mplungjan

有沒有方法可以在不指定.TITLE/.ARTIST的情況下遍歷對象？由於正在使用的JSON文件可以隨時更改。 – user2261755

如果你有很多的數據，那麼在每個循環中做字符串連接而不是附加到dom可能會很好。您只需在for循環後追加一次表格即可。 – jpmorin

請參閱更新 – mplungjan

你有對象的數組，所以循環數組和目標的屬性你想要的：

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

建表，你就必須在循環中構建HTML和（簡單的例子後追加）：

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

我會推薦一個像MustacheJS或Angular的模板引擎。

來源

2014-01-29 14:32:01 tymeJV

有沒有辦法做到沒有專門調用頭的循環？（.TITLE等） – user2261755

不，每次JSON文件更改時，都必須重新加載。如果你想要進行實時更改，你需要web套接字 – tymeJV

你可以把循環放入一個函數中，併爲數組設置一個參數，併爲你的屬性命名一個參數：'var myprop ='TITLE'; ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... [...] [數據[i] [myprop] ...}'並且每當你調用該函數時你改變該參數。 – jpmorin

建立一個表：

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>

來源

2014-01-29 14:59:33 jpmorin

我的解決辦法是用老式的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,'[email protected]' , 'Math Teacher'), 
    new Person(2,'Lori Segway' , 22,'[email protected]' , 'Hair Stylist'), 
    new Person(3, 'Peggy Stiller' , 31, '[email protected]' , 'Makeup Artist'), 
    new Person(4, 'Harry Lane' , 62, '[email protected]', 'Company Ceo'), 
    new Person(5, 'Michael Lowney', 40, '[email protected]' , 'Gung Fu Instructor'), 
    new Person(6,'Paul Byrant' , 56, '[email protected]' , 'Web Developer') 
];

抓住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，因爲我相信這很容易看到發生了什麼。

來源

2016-03-17 15:57:20

通過一個JSON數組循環來創建一個表

回答

相關問題