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

【问题标题】：Grouping sub arrays by parent array element with JavaScript使用 JavaScript 按父数组元素对子数组进行分组
【发布时间】：2020-01-10 18:12:28
【问题描述】：

我有一个从远程源加载的购物车页面，我想更改页面的布局。我已经抓取了购物车项目的所有 html(tables)，我想遍历这些项目并按项目名称对它们进行分组。页面上的html是这样的：

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

我正在使用 JavaScript 遍历“输入代码表行并通过“购物车项目”拆分项目。然后我将字符串拆分为标题、颜色、大小和城镇：

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 = [];         
    }

这给了我类似这样元素的数组：

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

我想要做的是将所有父元素与子元素分组，这样我就可以循环它们并用新的调整后的 html 替换当前的购物车 html。所以购物车将如下所示：

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

等等

如何对数组进行分组，以便使用 JavaScript 迭代和替换 html？

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

我通过将原来的每个循环更改为这个来解决这个问题

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

然后我运行了这个函数

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

然后输出有分组数组，有点乱但可以完成工作。

【讨论】：