欢迎提出如何更好地提出这个问题的建议 假设我有一个如下所示的数据库查询：
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输出示例。
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，它应该像this JSFiddle一样看待结尾。
解决了JACOB的例子：
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);
});
});
});
});
答案 0 :(得分：1)
我会将其分解为三个步骤：
步骤＃2中生成的数据结构应如下所示：
{
'1{4}2{3}6': {
name: 'product1',
options: {
'4': '2',
'3': '6'
}
},
'1{4}3{3}5': {
name: 'product1',
options: {
'4': '3',
'3': '5'
}
},
'2{4}3{3}5': {
name: 'product1',
options: {
'4': '3',
'3': '5'
}
}
}
要构建结构，请尝试使用jQuery：
var data = {};
$('#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);
});
});
Here is a jsFiddle显示结果。
答案 1 :(得分：1)
这适用于该示例。我希望它足够清楚，以便您可以将其与实际数据相适应。
var uniqueIdList = {}; // this will hold the unique product_id's
// find all divs with products_id attribute and store that id
var products = $('div[products_id]').each(function(){
var id = $(this).attr('products_id');
if (uniqueIdList[id] === undefined){
uniqueIdList[id] = true;
}
});
for (var uId in uniqueIdList ){ // for each product_id
var div = $('<div>', {id: uId}).appendTo('body'); // create a new div (container) and assign the id
products.filter('[products_id="'+uId+'"]').each(function(idx){ // find all divs that have the same product_id
var self = $(this);
var option = self.attr('products_options_id'),
value = self.attr('products_options_value_id'); // extract the info
if (idx === 0) { // for the first of each group extract the text (assuming it is the same for all of same group)
$('<p>',{text: self.text()}).appendTo(div); // ad text to div (as a p tag)
}
$('<p>',{text: option + ' : ' + value}).appendTo(div); // add info to the div
})
}