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 >
    {#each products as product}
        <div >
            <div >
                <div >
                    <div >
                        <h5>{product.name}</h5>
                        <button
                            on:click={addProduct(product.id)}
                            >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 !

CodePudding user response：

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>