Iterate over store which represents an object

[jbirnick]

Let's say I make a shopping website for which I build a cart. You can add products to the cart and remove them. Somewhere on the website it displays the current items in the cart, as well as the current total price.

I model the cart as a store which contains an object (not an array!), where the key is the product id and the value is the quantity.

const [store, setStore] = createStore({
  apple: 2,
  banana: 5
})

(The reason I don't use an array is because then I can't update it efficiently. Incrementing or decrementing the amount of a product would require an O(n) search to find the item in the array, on the other hand with the store I can find it directly with they key.)

Now I want to write a component that displays the current cart. I would want to use the For component for that. However, what can I put in the each=... argument to iterate over the (key, value) pairs of my cart?

I tried Object.entries(...) but it doesn't work. Then I thought unwrap() might help but I also couldn't get it to work, and more importantly I think it would break reactivity or at least destroy the fine-grained approach.

What is a working, idiomatic way to do this?

PS: I noticed that basically everywhere people use arrays to do such things and then iterate through the whole array to do changes. For example, this is an example of a piece of code from the Solid Docs:

const toggleTask = (id) => {
  setState(
    "tasks",
    (tasks) => tasks.id === id,
    produce((task) => {
      task.completed = !task.completed
    })
  )
}

What is going on? Comparing all the ids takes O(n) time. I thought Solid was about efficiency. This shouldn't be done. There must be a way to use some sort of map (i.e. object i.e. dictionary).