Объединить несколько данных с родителями?

Question

Предложения о том, как сформулировать этот вопрос лучше, приветствуются.
Скажем, у меня есть запрос к базе данных, как следующее:

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 s - это поля базы данных с соответствующими значениями.

Ответы, которые я получил от 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); 
      }); 
     }); 

    }); 
}); 

Answer 1

Я бы разорвать этот на три этапа:

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

Here is a jsFiddle показаны результаты.

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

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