私は自分のコンセプトを機能させるために使用している jsfiddle hereを持っています。
私が抱えている問題は JSON が原因である可能性が高いので、それを生成するために使用するコードを共有します。
まず、クエリを実行します。
$sth->execute();
$last_sup = 0;
$i = 0;
$reorderArr = array();
$prodsArr = array();
$si = 0;
while ($row = $sth->fetchObject()) {
// If new supplier.
if ($last_sup !== $row->sup_id) {
$last_sup = $row->sup_id;
// If not first iteration.
if ($i !== 0) {
// Append $prodsArr to current $supArr
$supArr['prods'] = (array)$prodsArr;
// empty $prodsArr ready for next sup.
$prodsArr = array();
// Append $supArr to previous $reorderArr
$reorderArr[$si] = (array)$supArr;
$si++;
}
// Create entries for new supplier to $supArr
$supArr = array(
"supID" => $row->sup_id,
"supName" => $row->supplier_comp_name
);
}
// Build array of products for this supplier.
$prodsArr[] = array(
"pID" => $row->prod_id,
"sku" => $row->sku,
"pName" => $row->prod_name,
"cat" => $row->category_name,
"desc" => $row->prod_desc,
"stock_level" => $row->stock_level,
"reOrdLev" => $row->reorder_level,
"reOrdQty" => $row->reorder_qty,
"vat_exempt" => $row->vat_exempt,
"lastorderdate" => $row->lastorderdate,
"lastorderqty" => $row->lastorderqty,
"qty_in_outer" => $row->qty_in_outer,
"cost_per_outer" => $row->cost_per_outer
);
$i++;
}
// Process the very last loop (since it's normally processed
// at the start of the next loop.
// Append $prodsArr to current $supArr
$supArr[] = (array)$prodsArr;
// Append $supArr to previous $reorderArr
$reorderArr[$si] = (array)$supArr;
return $reorderArr;
次に、それを2倍 json_encodeにして（従ったチュートリアルで指示されたため）、次のようにJqueryで解析します。
var data = $.parseJSON(<? print json_encode(json_encode($reorderArr));?>);
そして、ページのスクリプト タグの間に上記の行を含め、以下の行を使用して処理する関数に送信します。
displayReorderList(data);
displayReorderList()現在の状態の関数は次のとおりです。
function displayReorderList($data) {
var table = document.createElement('table');
/**
* Set up supplier group.
* 1 loop per group.
*/
for(var i=0; i < data.length; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
// Need to put the Supplier name here in a colspan cell.
var text1 = document.createTextNode(data[i].supName);
td1.appendChild(text1);
tr.appendChild(td1);
table.appendChild(tr);
/**
* Setup Product Group.
* 1 loop per product.
*/
for(var j = 0; j < data[i].prods.length; j++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var text1 = document.createTextNode(data[i].prods[j].sku);
td1.appendChild(text1);
tr.appendChild(td1);
table.appendChild(tr);
}
}
document.body.appendChild(table);
データ構造の概要を簡単に説明すると、次のようになります。print_r($reorderArr)
Array
(
[0] => Array
(
[supID] => 2
[supName] => Sparks
[prods] => Array
(
[0] => Array
(
[pID] => 7
[sku] => 7
[pName] => Term Block
[cat] => Electrical
[desc] => Nylon connector block.
[stock_level] => 3
[reOrdLev] => 5
[reOrdQty] => 20
[vat_exempt] => 0
[lastorderdate] =>
[lastorderqty] =>
[qty_in_outer] => 1
[cost_per_outer] => 60.00
)
[1] => Array
(
[pID] => 5
[sku] => 5
[pName] => Electrical Tape
[cat] => Electrical
[desc] => Black
[stock_level] => 12
[reOrdLev] => 20
[reOrdQty] => 100
[vat_exempt] => 0
[lastorderdate] =>
[lastorderqty] =>
[qty_in_outer] => 1
[cost_per_outer] => 39.00
)
)
)
[1] => Array
(
[supID] => 9
[supName] => Prime Plumbing Inc.
[prods] => Array
(
[0] => Array
(
[pID] => 6
[sku] => 6
[pName] => BlowGas
[cat] => Plumbing
[desc] => 400g Canister
[stock_level] => 6
[reOrdLev] => 15
[reOrdQty] => 60
[vat_exempt] => 0
[lastorderdate] =>
[lastorderqty] =>
[qty_in_outer] => 1
[cost_per_outer] => 142.00
)
)
)
[2] => Array
(
[supID] => 12
[supName] => Trade Plumbing Supplies Inc.
[0] => Array
(
[0] => Array
(
[pID] => 1
[sku] => 1
[pName] => PTFE Tape
[cat] => Plumbing
[desc] => 10mm x 3m
[stock_level] => 9
[reOrdLev] => 10
[reOrdQty] => 50
[vat_exempt] => 0
[lastorderdate] =>
[lastorderqty] =>
[qty_in_outer] => 1
[cost_per_outer] => 24
)
[1] => Array
(
[pID] => 14
[sku] => 14
[pName] => Antique Tap Set
[cat] => Plumbing
[desc] => Gold/Ceramic bathroom set.
[stock_level] => 2
[reOrdLev] => 2
[reOrdQty] => 3
[vat_exempt] => 0
[lastorderdate] =>
[lastorderqty] =>
[qty_in_outer] => 1
[cost_per_outer] => 2800.00
)
)
)
)
仕入先別にグループ化された、再注文レベルに達した製品のリストを作成しようとしていますが、スクリプトが停止しているように見えますが、for(var j = 0; j < data[i].prods.length; j++) {その行を数回繰り返した後でのみです。data[i].prodsおそらくJSONの形式が正しくないため、の長さが誤って報告されているようです?
jsfiddleを参照してください。
更新
@Yogeshが正しい方向を示した後、次のように更新しました。
サーバー側の配列構築に変更$supArr[] = (array)$prodsArr;しました。$supArr[prods] = (array)$prodsArr;
それをした後、それはすべてうまくいきました。正しく生成されたデータでjsfiddle hereを参照してください。