如何将相同的值收集到 JSON 对象中？

Question

我有多个输入格式如下：

<input type='text' class='i_skema_qty' id='skema_1_bbg' value='1000' />
<input type='text' class='i_skema_qty' id='skema_1_acg' value='700' />
<input type='text' class='i_skema_qty' id='skema_2_bbg' value='1200' />
<input type='text' class='i_skema_qty' id='skema_3_bbg' value='1700' />
<input type='text' class='i_skema_qty' id='skema_2_acg' value='1540' />
<input type='text' class='i_skema_qty' id='skema_1_spm' value='900' />
<input type='text' class='i_skema_qty' id='skema_2_spm' value='300' />


//CONTAINER
<input type='text' class='i_grand_total' id='total_bbg' />
<input type='text' class='i_grand_total' id='total_acg' />
<input type='text' class='i_grand_total' id='total_spm' />

我会收集所有这些输入值并将它们分组到一个 json 对象中。格式应为：

[{"unit_kerja": "bbg","total": "3900"},{"unit_kerja": "acg","total": "2240"},{"unit_kerja": "spm","total": "1200"}]

数组中的unit_kerja 根据输入是动态的。然而它总是大于零。然后，将数组插入到与数组计数匹配的i_grand_total 容器中。

这是我当前的脚本，我被困在这里：

var grand_total = 0;
    $('.i_skema_qty').each(function(i){
        var _this_ttl    = $(this);

        var total_item   = parseFloat( _this_ttl.val().replace(',', '') );

        var arr_uk_skema = _this_ttl.attr('id').split('_');
        var uk_skema     = arr_uk_skema[2];                

        grand_total      = grand_total + total_item;
        alert(uk_skema +":"+ grand_total);          
    });

Answer 1

我会简化为由unit_kerja 索引的对象，其值是数组对象，例如{"unit_kerja": "bbg","total": "3900"}。遍历每个i_skema_qty，如果该对象尚不存在，则在累加器中创建该对象，然后添加到total。然后，获取对象的值将其转回数组，并映射以将total 转为字符串而不是数字：

const grouped = [...$('.i_skema_qty')]
  .reduce((a, input) => {
    const key = input.id.match(/[a-z]+$/)[0];
    if (!a[key]) {
      a[key] = { unit_kerja: key, total: 0 };
    }
    a[key].total += Number(input.value);
    return a;
  }, {});
const output = Object.values(grouped)
  .map(obj => ({ ...obj, total: String(obj.total) }));
console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='i_skema_qty' id='skema_1_bbg' value='1000' />
<input type='text' class='i_skema_qty' id='skema_1_acg' value='700' />
<input type='text' class='i_skema_qty' id='skema_2_bbg' value='1200' />
<input type='text' class='i_skema_qty' id='skema_3_bbg' value='1700' />
<input type='text' class='i_skema_qty' id='skema_2_acg' value='1540' />
<input type='text' class='i_skema_qty' id='skema_1_spm' value='900' />
<input type='text' class='i_skema_qty' id='skema_2_spm' value='300' />