使用 JavaScript 按父数组元素对子数组进行分组

Question

I have a cart page that is loaded from a remote source and I want to change the layout of the page. I have grabbed all the html(tables) for the cart items and I want to iterate over the items and group them by item name. The html on the page is like this:

<table>
<tbody>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            South Georgia Pocket Tee - Mint / Medium
        </div>
    </td>
    <td class="cart-price">
        $15.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[29209762256]" id="updates_29209762256" value="2" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(29209762256); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $30.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            South Georgia Pocket Tee - Navy / Medium
        </div>
    </td>
    <td class="cart-price">
        $15.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[29209761936]" id="updates_29209761936" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(29209761936); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $15.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            South Georgia Pocket Tee - Navy / Small
        </div>
    </td>
    <td class="cart-price">
        $15.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[29209761872]" id="updates_29209761872" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(29209761872); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $15.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Crimson with Navy / Large
            <br />
            Town/City:
            ohio
            <br>
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347518736); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Crimson with Navy / Large
            <br />
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347518736); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Crimson with Navy / Small
            <br />
            Town/City:
            ohio
            <br>
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35345344848); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00

    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Crimson with Navy / Small
            <br />
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35345344848); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Navy with Red / Medium
            <br />
            Town/City:
            ohio
            <br>
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347517136); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Navy with Red / Medium
            <br />
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347517136); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Red with Ice Blue / XLarge
            <br />
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347521872]" id="updates_35347521872" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347521872); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
            <br />
            Town/City:
            ohio
            <br>
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();"/>
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(41628245584); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
            <br />

        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();"  />
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(41628245584); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
<tr>
    <td class="cart-item">
        <div class="cart-title">
            Town Specific Short Sleeve Tee - White with Red / Medium
            <br />
        </div>
    </td>
    <td class="cart-price">
        $16.00
    </td>
    <td class="cart-quantity">
        <input type="text" class="cart-qty" size="4" name="updates[35347518416]" id="updates_35347518416" value="1" onfocus="this.select();" />
    </td>
    <td class="cart-remove">
        <a href="#" onclick="remove_item(35347518416); return false;"><i class="icon-trash icon-2x"></i></a>
    </td>
    <td class="cart-total">
        $16.00
    </td>
</tr>
</tbody>

I am using JavaScript to iterate over the `enter code table rows and split the item by 'cart-item'. I am then splitting the string into title, colour, size and town:

var full_array = new Array();
var item_array = new Array();
var variant_array = new Array();  

$('.cart-item').each(function() {
    var split_string = $(this).find(' .cart-title').html().split(' - ');
    if (split_string[0] != 'remove') {
        item_array['name'] = split_string[0];
        var split_variant = split_string[1].split('/');
        variant_array['colour'] = split_variant[0];
        var split_size = split_variant[1].split('<br>');
        variant_array['size'] = split_size[0];
        variant_array['town'] = split_size[1];
        item_array['value']=variant_array;
        full_array.push(item_array);
        item_array = [];
        variant_array = [];         
    }

This gives me array with elements similar to this:

array{ name:"South Georgia Pocket Tee"
     value:[colour: "Navy",size: "Small", town: undefined]}

What I want to do is group all the parent elements with sub elements under so I can loop them and replace the current cart html with new adjusted html. So the cart will look like this:

<div><ul>**Town Specific Short Sleeve Tee**
   <li>Crimson with Navy /Large : 1</li>
   <li>Crimson with Navy /Large(town-London) : 1</li>
   <li>Navy with Red /Medium :1</li>
   <li>Navy with Red /Medium(town-Manchester) : 1</li>
</ul></div>

etc.

How would I group the array so I can iterate and replace the html using JavaScript?

Answer 1

I sorted this out by changing the original each loop to this

        if(split_variant[0].search('<br>')) {
            var split_size = split_variant[1].split('<br>');
            variant_array['size'] = split_size[0];
            variant_array['town'] = split_size[1];
        }else{
            variant_array['size'] = split_variant[1];
        }
        item_array['value']= new Array();
        item_array['value'].push(variant_array);
        full_array.push(item_array);

then I ran this function

 full_array.forEach(function(value) {
    var existing = output.filter(function(v, i) {
        return v.name == value.name;
    });
    if (existing.length) {
        var existingIndex = output.indexOf(existing[0]);
        output[existingIndex].value = output[existingIndex].value.concat(value.value);
    } else {
        if (typeof value.value == 'string')
            value.value = [value.value];
        output.push(value);
    }
});

and output then had the grouped array, bit messy but does the job.