SolidJS•2y ago

Nested For Loop?

Quick Version: Every time a For loop runs I'd like for one item to be displayed from the first set of data and one item from the second set of data. I have a For loop that creates a list of items fetched from a database. The stuff from the database is fed to a component in the For loop and each item in the list is the result of the component. OK! I have another list of items fetched from a database. Each time an item from the first data set is created in the For loop I'd like to create an item from the second data set using the same component in the For loop. I feel like I'm just thinking about this wrong.

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

export const Component = (props) => {
  const params = useParams()

  const oneList = createServerData$(
    (value) => getSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  const twoList = createServerData$(
    (value) => testSomething(value[0], value[1], value[2]),
    {
      key() {
        return [params.thingOne, params.thingTwo, props.propsThing]
      },
    }
  )

  return (
    <For
      each={oneList()}
      fallback={<div class='text-textColor'>Loading A List...</div>}
    >
      {(item) => (
        <AnotherComponent
          aProp={props.propsThing}
          bProp={item.thing}
          cProp={item.thingTwo}
          aBoolean={true}
        />
***//SOMEHOW CREATE ITEM FROM SECOND DATA SET HERE***
      )}
    </For>
  )
}

7 Replies

GrahfOP•2y ago

think only option is to make another component

thetarnav•2y ago

so you have two lists “a” and “b” and want to display them as a 1 b 1 a 2 b 2 a 3 b 3 etc is that correct? how do you identify pairs in the lists? by index? same id?

GrahfOP•2y ago

Yes that's a much better way of putting it. That looks right. Yes I'd like them to match up by index. First item in the first list should be paired with the first item in the second list

thetarnav•2y ago

can the lists change after they have been fetched?

thetarnav•2y ago

if the lists are static you could do sth like this: https://playground.solidjs.com/anonymous/3de9088c-f774-4f5d-b3ae-95e55057ed83

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

thetarnav•2y ago

for dynamic you could use <Index> or <Times> from solid-primitives to avoid reruning components

GrahfOP•2y ago

The list could change after certain buttons are pressed on the website. Click a button will change bost of the lists that are displayed. There are like four different lists right now. I'll check out Index and Times and give them a shot. Thanks I think I made this 100x harder than it had to be because of reasons but I guess it's pretty simple

Gaming

Programming

Nested For Loop?