欢迎提出如何更好地表述这个问题的建议。
假设我有一个如下的数据库查询:
var dbSize = 5 * 1024 * 1024; // 5MB
var db = openDatabase("Oscommerce", "1.0", "Oscommerce Database", dbSize);
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM customers_basket WHERE customers_id="1"', [], function(tx, results) {
var len = results.rows.length,
i;
var products_options_array = {};
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
products_options_array[r.customers_basket_id] = r;
console.log(products_options_array);
}
});
});
下面我提供了一个 HTML 输出示例。s 中的所有属性div
都是具有相应值的数据库字段。
我从 jacob 和 Gaby 那里得到的答案是基于下面的 HTML。这是我的错误,因为我认为如果我这样提供它会更容易理解我的问题。
<div customers_basket_attributes_id="1" customers_id="1" products_id="1{4}2{3}6"
products_options_id="4" products_options_value_id="2">product 1</div>
<div customers_basket_attributes_id="2" customers_id="1" products_id="1{4}2{3}6"
products_options_id="3" products_options_value_id="6">product 1</div>
<div customers_basket_attributes_id="3" customers_id="1" products_id="1{4}3{3}5"
products_options_id="4" products_options_value_id="3">product 1</div>
<div customers_basket_attributes_id="4" customers_id="1" products_id="1{4}3{3}5"
products_options_id="3" products_options_value_id="5">product 1</div>
<div customers_basket_attributes_id="3" customers_id="1" products_id="2{4}3{3}5"
products_options_id="4" products_options_value_id="3">product 2</div>
<div customers_basket_attributes_id="4" customers_id="1" products_id="2{4}3{3}5"
products_options_id="3" products_options_value_id="5">product 2</div>
我怎样才能得到它:
<div products_id="1{4}2{3}6">
<p>product1</p>
<p>products_options_id_4 : products_options_value_id_2</p>
<p>products_options_id_3 : products_options_value_id_6</p>
</div>
<div products_id="1{4}3{3}5">
<p>product1</p>
<p>products_options_id_4 : products_options_value_id_3</p>
<p>products_options_id_3 : products_options_value_id_5</p>
</div>
<div products_id="2{4}3{3}5">
<p>product2</p>
<p>products_options_id_4 : products_options_value_id_3</p>
<p>products_options_id_3 : products_options_value_id_5</p>
</div>
而对于更多的 GUI,它应该看起来像这样JSFiddle
。
用雅各布的例子解决:
var dbSize = 5 * 1024 * 1024; // 5MB
var db = openDatabase("Oscommerce", "1.0", "Oscommerce Database", dbSize);
var data = {};
var cart_str = '';
var products_options_array = {};
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM customers_basket WHERE customers_id="1"', [], function(tx, results) {
var len = results.rows.length,i;
for (i = 0; i < len; i++) {
var r = results.rows.item(i);
products_options_array[r.customers_basket_id] = r;
//console.log(products_options_array);
}
for (key in products_options_array) {
var value = products_options_array[key];
customers_basket_id = value['customers_basket_id'];
customers_id = value['customers_id'];
products_id = value['products_id'];
products_options_id = value['products_options_id'];
products_options_txt = value['products_options_txt'];
products_options_value_id = value['products_options_value_id'];
products_options_value_txt = value['products_options_value_txt'];
customers_basket_quantity = value['customers_basket_quantity'];
final_price = value['final_price'];
customers_basket_date_added = value['customers_basket_date_added'];
cart_str += '<div customers_basket_attributes_id="' + customers_basket_id + '" customers_id="' + customers_id + '" products_id="' + products_id + '" products_options_id="' + products_options_id + '" products_options_value_id="' + products_options_value_id + '" style="display:none">' + products_id + '</div>';
}
$('#input').html(cart_str);
$('#input div').each(function() {
var div = $(this);
var productId = div.attr('products_id');
var optionId = div.attr('products_options_id');
if (!(productId in data)) data[productId] = {
name: div.text(),
options: {}
};
if (!(optionId in data[productId].options)) {
var optionValueId = div.attr('products_options_value_id');
data[productId].options[optionId] = optionValueId;
}
});
$.each(data, function(productId, product) {
var productDiv = $('<div/>').attr('products_id', productId).appendTo('#output');
$('<p/>').text(product.name).appendTo(productDiv);
$.each(product.options, function(optionId, optionValueId) {
$('<p/>').text('products_options_id_' + optionId + ' : products_options_value_id_' + optionValueId).appendTo(productDiv);
});
});
});
});