iT邦幫忙

0

JS 尋找陣列值,更新陣列內容[技術詢問]

各位先進大大,目前在練習JS,有一個小問題想要詢問
功能需求為:
1.輸入對應ID與數量欄位,增加陣列中相對應ID的數量
2.若陣列中無相對應的ID則增加一個上去
遇到問題:
1.第一次增加項目都沒問題,但增加不同ID的項目進去時,不會再對應ID增加數量,而是一直增加品項

想請各位大大再提點小弟一下,是否有哪邊沒注意到導致這個Bug產生
以及我打Code的方式是否有可以再做得更好的呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物件比對值</title>
</head>
<body>
    <label for="id">ID</label>
    <input type="text" id="id">
    <br>
    <label for="amount">數量</label>
    <input type="number" id="amount">
    <button id="button">push</button>

    <script>
        const prod = [
            {
                id:'2',
                amount:3
            },
            {
                id:'1',
                amount:2
            },
            {
                id:'3',
                amount:10
            }
        ]
        const button = document.getElementById('button');
        const amount = document.getElementById('amount');
        const id = document.getElementById('id');
        const itemList = [];
        function clickHandler(){
            if(id.value){
                if(itemList.length == 0){
                    // 如果清單內沒有品項
                    const product = prod.find(item=>{
                        return item.id == id.value;
                    }) 
                    itemList.push(product);
                }else{
                    // 若清單內有品項
                    itemList.forEach(product=>{
                        if(product.id == id.value){
                            // 若清單內品項重複
                            if(amount.value){
                                product.amount += parseInt(amount.value);
                            }else{
                                alert('請輸入數量');
                            }
                        }else if(product.id != id.value){
                            // 若清單內品項不重複
                            if(amount.value){
                                const item = prod.find(items =>{
                                    return items.id == id.value;
                                });
                                itemList.push(item);
                            }else{
                                alert('請輸入數量');
                            }
                        }
                    })
                }
            }
            console.log(itemList);
        }

        button.addEventListener('click',clickHandler);
    </script>

</body>
</html>
fillano iT邦超人 1 級 ‧ 2021-12-07 16:55:30 檢舉
不用管清單的長度,只要先在清單找品項:如果有,就加數量,如果沒有,就加品項跟數量。

2 個回答

1
fillano
iT邦超人 1 級 ‧ 2021-12-07 17:04:38
fillano iT邦超人 1 級 ‧ 2021-12-07 17:08:56 檢舉
2
Felix
iT邦新手 3 級 ‧ 2021-12-07 17:51:12

建議您一開始就檢查是否有輸入,畢竟總不能函式執行後才發現原來走錯路了。

不知道 prodamount 是否也要增加,因此假定點擊按鈕,只有 itemList 會增加。

function clickHandler() {
    if (!id.value || !amount.value) return alert('有欄位沒有被輸入!');
    /* itemList 中所有的 id */
    const ids = itemList.map(obj => obj.id);
    /* id.value 在 itemList 的第幾個位置 */
    const index = ids.indexOf(id.value);
    /* 欲修改 amount 之陣列的位置 */
    const pos = index > -1 ? index : itemList.length - 1;
    if (index === -1) {
        itemList.push(
            /* 拷貝 prod 中和 id.value 對應的物件 */
            {...prod.find(item => item.id === id.value)}
        );
    }
    itemList[pos].amount += parseInt(amount.value, 10);
    console.log(ids, index, itemList);
}

我要發表回答

立即登入回答