我在这里有一个 jsfiddle ,我用它来让我的概念发挥作用。
我遇到的问题很可能是由 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;
然后我把它加倍 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以及正确生成的数据。