通过一个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数组循环来创建一个表

回答

相关问题