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).

[Grabber]

@ryansolid do you know any O(1) way to update and render an Object?

[Grabber]

@jbirnick

export const [a, setA] = createStore({
  a: new Map([
    [1, { id: 1, value: 'a' }],
    [2, { id: 2, value: 'b' }],
  ]),
});

With an array: O(n) + O(1) => O(n+1), with a map O(1) + O(1) => O(2)

setA(
  produce((state) => {
    const item = state.a.get(1); // O(1)
    if (item) {
      state.a.set(1, { ...item, value: Math.random() }); // O(1)
    }
  }
));

<ul>
  <For each={a.a}> // doesn't render
  <For each={Array.from(a.a)}> // render, but reactivity is gone
    {(item, index) => (
      <li>
        #{index()} {JSON.stringify(item)}
      </li>
    )}
  </For>
</ul>

Any ideas?

[Grabber]

@atk any insight?

[Grabber]

export const [x, setX] = createStore({
  arr: [],
  map: new Map(),
});

const addX = (key, val) => {
  setX(
    produce((state) => {
      const idx = state.map.get(key);
      if (idx === undefined) {
        state.map.set(key, state.arr.push(val) - 1);
      } else {
        state.arr[idx] = val;
      }
    })
  );
}

const getX = (key) => {
  return x.arr[x.map.get(key)];
}

const delX = (key) => {
  const idx = x.map.get(key);
  if (idx === undefined)
    return;

  setX(
    produce((state) => {
      state.map.delete(key);
      delete state.arr[idx];
    })
  );
}

const swpX = (key) => {
  const idx = x.map.get(key);
  if (idx === undefined || idx == 0)
    return;

  setX(
    produce((state) => {
      state.map.set(key, 0);
      state.map.set(state.map.keys().next().value, idx);
      [state.arr[0], state.arr[idx]] = [state.arr[idx], state.arr[0]];
    })
  );
}

return (
  <>
  <ul>
    <For each={x.arr.filter(a => a)}>
      {
        (elt, idx) => (
          <li>
            #{idx()} {JSON.stringify(elt)}
          </li>
        )
      }
    </For>
  </ul>
  </>
);