将多个数据与其父级结合起来?
欢迎就如何更好地提出这个问题提出建议。
假设我有一个如下所示的数据库查询:
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< /代码>
。
以雅各布的例子解决:
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);
});
});
});
});
Suggestions of how to formulate this question better are welcome.
Let's say I have a database query like the following:
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);
}
});
});
Below I provide an HTML output example.
All attributes inside the div
s are the database fields with their corresponding values.
The answers I got from jacob and Gaby were based on the HTML below. This was my mistake, because I thought it would be easier to understand my problem if I provided it like that.
<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>
How can I get it like this:
<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>
And for more GUI, it should look at the end like this JSFiddle
.
SOLVED WITH JACOB'S EXAMPLE:
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);
});
});
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

发布评论
评论(2)
这适用于该示例。我希望它足够清楚,以便您可以将其适应实际数据。
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
})
}
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
我将其分为三个步骤:
步骤 #2 中生成的数据结构应如下所示:
要构建结构,请使用 jQuery 尝试类似的操作:
然后,要构建输出内容,请执行以下操作:
这里是一个 jsFiddle 显示结果。
I would break this up into three steps:
The resulting data structure in step #2 should look something like this:
To build the structure, try something like this with jQuery:
Then, to build the output content, do this:
Here is a jsFiddle showing the result.