Update array elements

I am trying to do something similar to a shopping cart, where initially there is a series of products that I load with an array of objects.

products = [
        {
            id: 1,
            name: "Product1",
        },
        {
            id: 2,
            name: "Product2",
        },
        {
            id: 3,
            name: "Product",
        },

];

I show the list of products with svelte like this:

<div class="col-md-12 row grid">
    {#each products as product}
        <div class="card mt-2 g-col-3">
            <div class="row">
                <div class="col-md-8">
                    <div class="card-body">
                        <h5>{product.name}</h5>
                        <button
                            on:click={addProduct(product.id)}
                            class="btn btn-primary">Add Product
                        </button>
                        { "0 products"}
                    </div>
                </div>
            </div>
      </div>
    {/each}
</div>

And through the function addProduct() I update the array inventory with the product id and the number of units of that product

let inventory =[];
const addProduct = id =>{
        
        let qty = 0;
        if(inventory.find(element => element.id === id))
        {
            qty = inventory.find(element => element.id === id).qty
            inventory=inventory.filter(element => element.id !== id)
            inventory.push({id:id,qty:qty+1});

        }
        else{       
        inventory.push({id:id,qty:1});
        }
        
    }

Where I don’t know how to set it up is in each product, where it now says { “0 products”}, update it dynamically as the user adds each of the products

Thanks a lot !

Answer

I understand with { "0 products"} you want to display the number of items in the inventory. You could do this by replacing it with

{inventory.find(element => element.id === product.id)?.qty ?? 0} products

Optional chaining (?.) and Nullish coalescing operator (??) used

Besides the fact that you want to assign inventory to itself after you made an edit like pushing an item, so that a re-render is triggered, there’s a logical problem in addProduct(). If there’s already an element, you don’t want to push another one, but edit the existing, which gives

function addProduct(id) {
        const element = inventory.find(element => element.id === id)
        if(element) {
            element.qty += 1
            inventory = inventory
        }
        else{       
            inventory.push({id:id,qty:1});
            inventory = inventory
        }
    }

While this would work – see this REPL – I would consider making inventory an object instead of an array, because it was a bit ‘quicker’ to check for entries and edit them, compare this REPL (the entries could always be easily iterated using Object.entries/.keys/.values(inventory))

<script>
    import {products} from './products'

    let inventory = {}

    function addProduct(id) {
        const entry = inventory[id]
        if(entry) {
            entry.qty += 1
            inventory = inventory
        }
        else{       
            inventory[id] = {qty:1}
            inventory = inventory
        }
    }
</script>

<div>
    {#each products as product} 
    <h5>{product.name}</h5>
    <button on:click={() => addProduct(product.id)}>
        Add Product
    </button>
    {inventory[product.id]?.qty ?? 0} products
    {/each}
</div>