将多个数据与其父级结合起来?

发布于 12-23 05:04 字数 5464 浏览 2 评论 0原文

欢迎就如何更好地提出这个问题提出建议。
假设我有一个如下所示的数据库查询:

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 divs 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

-黛色若梦2024-12-30 05:04:51

我将其分为三个步骤:

  1. 迭代源文档。
  2. 建立有代表性的数据结构。
  3. 构建输出文档。

步骤 #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);
    });
});

这里是一个 jsFiddle 显示结果。

I would break this up into three steps:

  1. Iterate through the source document.
  2. Build a representative data structure.
  3. Build the output document.

The resulting data structure in step #2 should look something like this:

{
    '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'
        }
    }
}

To build the structure, try something like this with 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;
    }
});

Then, to build the output content, do this:

$.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 showing the result.

小瓶盖2024-12-30 05:04:51

这适用于该示例。我希望它足够清楚,以便您可以将其适应实际数据。

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
    })
}

演示位于 http://jsfiddle.net/gaby/dRFCh/1/

This works for the example. I hope it is clear enough so you can adapt it to real data..

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
    })
}

Demo at http://jsfiddle.net/gaby/dRFCh/1/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文