vanx.list filter

[HEAVYPOLY]

Hi, I am trying to filter an array of objects (items) using items.filter(item => item.period === state.period) but this code isn't working. Is there a way to do this with vanx.list?

    vanX.list(() => div({ class: 'pricingCards', style: 'place-items: center' }), items.filter(item => item.period === state.period), ({ val: v }) =>
      div({ class: 'pricingCard', style: `font-size:3rem;border:solid .5rem ${v.color}` },
        h1({ style: 'font-size:4.5rem;max-height:4rem;' }, v.label),
        div({ style: 'font-size:2rem;' }, v.description),
        h1({ style: 'font-size:5.8rem;' }, '$' + v.price),
        div({ style: 'font-size:1.8rem;max-height:1rem;margin-bottom:3rem' }, 'pay once. unlock forever!'),
        button({
          style: `font-size:1.8rem;width:70%;font-weight:300;padding:3.5rem;background:${v.color};color:black`,
          onmouseover: (e) => {
            e.target.style.background = adjustCSSBrightness(v.color, 1.2)
            e.target.parentElement.style.boxShadow = `0 0 3rem ${v.color}`
          },
          onmouseout: (e) => { e.target.style.background = v.color; e.target.parentElement.style.boxShadow = 'var(--shadow)' },
          onclick: () => checkoutLemonsqueezy(v),
        }, 'BUY' + v.label.slice(3).toUpperCase()),
        ul({ style: 'margin-bottom:auto' }, v.includes.map(i => li(i))),
      ),
    ),

[Tao-VanJS]

The items argument in vanX.list needs to be a reactive object. Thus items.filter(...) wouldn't work.

For your example to be working, you can try something like this:

const items = ...
const filteredItems = vanX.reactive([])
van.derive(() => vanX.replace(filteredItems, () => items.filter(item => item.period === state.period)))
vanX.list(..., filteredItems, ...)

Hope it helps :-)

[HEAVYPOLY]

Thanks,
This works except I get a max call stack size exceeded when pressing period buttons to change state.period

is derive firing in infinite loop?

  const state = vanX.reactive({period: 'lifetime'})
  const filteredItems = vanX.reactive([])
  van.derive(() => vanX.replace(filteredItems, () => items.filter(item => item.period === state.period)))
  return div({ style: 'margin:3rem;margin-top:auto;margin-bottom:auto;flex-direction:column;align-items:center;gap:3rem;}' },
    // h1({ style: 'font-size:4rem;min-height:9rem' }, 'WEBBYPAINT PRO Pricing'),
    div(
      button({ onclick: () => state.period = 'lifetime' }, 'Lifetime'),
      button({ onclick: () => state.period = 'monthly' }, 'Monthly'),
    ),
    span({ style: 'font-size:2.5rem;margin:3rem;margin-bottom:4rem;text-align:center;' }, 'Unlock all features and tools. Pay once, use forever. Upgrade at any time'),
    vanX.list(() => div({ class: 'pricingCards', style: 'place-items: center' }), filteredItems, ({ val: v }) =>
    

    RangeError: Maximum call stack size exceeded
    at set val (:1:461)
    at V (:1:866)
    at set val (:1:531)
    at Object.T [as replace] (:1:1738)

    at w (:1:218)
    at V (:1:867)
    at set val (:1:531)
    at Object.T [as replace] (:1:1738)

    ```

[Tao-VanJS]

Ah..., sorry, my bad.

Accessing a state or reactive object inside van.derive can be really tricky sometimes. How about this workaround:

van.derive(() => 
  setTimeout(
    period => vanX.replace(filteredItems,
      () => items.filter(item => item.period === period)),
    0, state.period
  )
)

[Tao-VanJS]

Hi @HEAVYPOLY,

VanJS 1.3.0 was just released to improve the situation: #275.

With the improvement in 1.3.0, you can simply have:

van.derive(() => vanX.replace(filteredItems, () => items.filter(item => item.period === state.period)))

without having the problem of infinite loop.

Hope it helps :-)

[HEAVYPOLY]

Works great, thank you!

[HEAVYPOLY]

That works perfectly, thanks!! This is a pretty common situation in my app, should I always use this workaround or is there more standardized vanjs way to do it?

[Tao-VanJS]

For now you can use the workaround. I am currently thinking about if there is a more systematic way to make the situation easier to deal with. I will keep you posted if any improvement is made in VanJS regarding this.

[HEAVYPOLY]

sounds good, thank you