まず、json の形式を修正する必要があります。オブジェクト形式の配列を扱っているので、
[
{
propery: "some value",
property2: "some other value"
},
//.... more objects {} here
];
コードに飛び込む前に、サーバーからの応答が文字列として返されるため、JavaScript オブジェクトに「コンパイル」する必要があることを知っておく必要があります。あなたは2つの方法でそれを行うことができます
- メソッドを使用した好ましい
JSON.parse(someString);方法
- 醜くてあまり望ましくないのは、
evalまたはFunction次のような方法を使用することですvar result=[]; eval("result=" + responseStringFromServer);
より良いので、常に最初のアプローチを使用してください。理由がわからない場合は、このリンクを確認してください
タイプ (Table、Row、および cell) を使用したいので、JSON は JavaScript Object Notation に不足しているため、役に立たないことを知っておく必要があります。つまり、var myArray= JSON.parse(responseFromServer);myArray を実行すると、各項目が Javascript オブジェクトである JavaScript 配列になります。下層の型が何であるかを知る必要がない場合は、オブジェクトを変換しないでください
実際の例はここにあります
そして、これがどのように機能するかです
データ用にhtmlにプレースホルダーが必要です。次のようになります。
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</table>
このようなajaxから結果を得たとしましょう
[
{
id: 1,
firstName: "Peter",
lastName: "Jhons"
},
{
id: 2,
firstName: "David",
lastName: "Bowie"
}
]
データを描画するには、この 3 つの方法を使用できます
// This will iterate over each result in array (as you mentioned the javascript table)
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
// call method to draw each row
drawRow(data[i]);
}
}
function drawRow(rowData) {
// create html table row
var row = $("<tr />")
// append it to HTML teable element
$("#personDataTable").append(row);
// append each cell to row html element with data in it
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
}
最後に、ajax 呼び出し (もちろん jQuery を使用)
$.ajax({
url: '/echo/json/',
type: "post",
dataType: "json",
data: {
//... pass here any data you want to your server
},
success: function(data, textStatus, jqXHR) {
// since we are using jQuery, you don't need to parse response
drawTable(data);
}
});
そして、この投稿の最後に、このプロセスを簡素化できる多くのニース ライブラリがあることを知っておく必要があります。BackboneJS や AngularJs のように複雑な状況で使用するために実際に使用されるものもあれば、テンプレート エンジンのみである jQuery.template や jQuery.render のように単純なものもあります。アプリの複雑さと、単一ページで発生する「レンダリング」の数によって異なります。
上記の例と同じですが、AngularJS を使用しています
実際の例はここにあります
次のようなページが必要です。
<html ng-app="myApp">
<head>
<title>Example 2</title>
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<style type="text/css">
table {
border: 1px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
</style>
</head>
<body>
<!-- Assign Controller to element, it will handle the "data scope" and events of ineer elements -->
<div ng-controller="PeopleCtrl">
<!-- Example of attaching event handler to link click event -->
<p> Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<!-- here is how to receptively render array of object using ng-repeat directive. Note that you have defined people attribute in $scope object, it is bound to this template below -->
<tr ng-repeat="person in people">
<td>{{person.id}}</td> <!-- bind single attribute -->
<td ng-template="{{person.firstName}} {{person.lastName}}"></td> <!-- binding 2 attributes to same element using ng-template directive -->
</tr>
</table>
</div>
<script type="text/javascript">
// define your module (application)
var app = angular.module('myApp', []);
// define controller responsible to get data and bind result to page
function PeopleCtrl($scope, $http) {
$scope.people = []; //this will be used in page template above
// event handler for link which you need to click in order to get data
$scope.loadPeople = function() {
// change link to hit your server json
var httpRequest = $http.get("/link/to/people.json");
// on success of HTTP GET request above handle response and set new data
httpRequest.success(function(data, status) {
$scope.people = data;
});
};
}
</script>
</body>
</html>