Listview only repeats one element from array

[SkylarP23]

I am using the old list view. I have to use the legacy component because the new list view component doesn't allow access to component values. I'm making a checklist app, so I have a table that is full of questions and the list view generates a display of all the questions dynamically for me in the container with checkboxes (using the new listview). I can't save that info back to the DB as of yet so I am trying the old listview component. However, following the docs for legacy list views. I can't get each question to dynamically populate. It only displays the first question, repeated for each entry in the db. I used {{RoofInspectionQuestions.data[i].question}}, this is in the "i variable" section of the docs. But that doesn't work as expected like I said above. In the docs, it shows each record from the query in the listview but in mine it only shows the first record. Hopefully that made sense but if not please let me know and I will try to explain it further.

I created two different queries to try this. This one I formatted the data as an array but it didn't change the behavior

This one I used the original query (select * from table) without converting it to an array. No change

[ScottR]

Did you set the number of instances? And what does the query actually return? Can you post an example of the payload from the query and I can try and duplicate using that data in a legacy ListView

[SkylarP23]

Hello Scott! thanks for the reply. Yes, the number of items in the list view is set to {{ RoofInspectionQuestions.data.question.length }} which gives me 13 rows.

The query does return data. I can see it in the output panel as well as the state tab on the left.

I wasn't sure how to post the payload so I just copied it from the state panel.
Data:
[
id [
1
2
3
4
5
6
7
8
9
10
11
12
13
]
question [
"Roof Assembled per print on fixture (Caulk all seams & around fastener holes); Fasteners are tight"
"Insulation and perforated metal installed and secure (PERF is not damaged)"
"Insulation is neatly installed and does not stick out through perf"
"Perimeter wireway is correctly installed"
"Mounting plates, lights, & conduit are correctly installed"
"Unistrut is installed and in correct location for transformer"
"Confirm unistrut nuts are properly oriented in the unistrut channel"
"Excess caulk removed and smudges cleaned"
"Finish is scratch free and paint is visually acceptable"
"Roof assembled per print overall size (+/-,25",+/- 6mm)"
"Loose parts are accounted for (Raincap, heater bracket,radiator hatch/gasket, transformer bracket, silencer hardware, etc)"
"Foam Gasket is installed on Mounting Surface"
"Roof Join sealing tape applied per Hennig standard."
]

Let me know if there is a better way to do this. Thanks again for your continued support.

• Skylar

[ScottR]

That doesn't look like the correct format as far as I can tell.

Can you try making your data source to be in the Fx panel like so and click on the copy to clipboard icon the square in the top right of the green panel across from Array(50) when clicking into that field:

And use the code button

in this window and paste the data in it....like so...

[
  {
    "id": 1,
    "name": "Peter Rubina",
    "email": "kmackegg3n@hugedomains.com",
    "signup_date": "2023-01-21T07:25:00.000Z",
    "role": "Admin",
    "enabled": true
  },
  {
    "id": 2,
    "name": "Egdale Hank",
    "email": "sbohey1y@twitter.com",
    "signup_date": "2023-01-05T19:37:00.000Z",
    "role": "Admin",
    "enabled": true
  },.....
]

Also, it appears that the new list view has been fixed to be able to access child component values...in a more recent post...

[bobthebear]

here's the Legacy List View i used:

and the text value set as:

what's interesting are the keys of each item. in this screenshot, all 3 components have been renamed (from top to buttom: title, text_item, person_button). However, if you look at .data[i] you see 1 button and 1 text component with the originally set default names. It seems that only 1 of each component type will be listed in the .data object and it will always be the value of the first type of that component added. For example, if I added another text component, .data will still only have 3 keys with one named "text2" that the same value still.

tldr; @SkylarP23 the solution for you should be to change the list view 'item keys' to {{query14.data[i].question}} then for the Text component value use {{RoofInspectionQuestions.data[i].retoolInternal_rowKey}}... hopefully I didn't just confuse myself changing things for your variable names and obj structure, but I think I got that right. Let me know if I misunderstood something or this just doesn't work for your situation

[SkylarP23]

Do you know what Post someone was able to access component values of a new listview? I just tried it and I still get the scope error.

"checkbox1 can only be referenced in listview1 because it may not always be available due to performance optimizations." - on a button click, i'm running a custom script just to see if I could get the data from the listview.

Below is the data from the query RoofInspectionQuestions:

[
  {
    "id": 1,
    "question": "Roof Assembled per print on fixture (Caulk all seams & around fastener holes); Fasteners are tight"
  },
  {
    "id": 2,
    "question": "Insulation and perforated metal installed and secure (PERF is not damaged)"
  },
  {
    "id": 3,
    "question": "Insulation is neatly installed and does not stick out through perf"
  },
  {
    "id": 4,
    "question": "Perimeter wireway is correctly installed"
  },
  {
    "id": 5,
    "question": "Mounting plates, lights, & conduit are correctly installed"
  },
  {
    "id": 6,
    "question": "Unistrut is installed and in correct location for transformer"
  },
  {
    "id": 7,
    "question": "Confirm unistrut nuts are properly oriented in the unistrut channel"
  },
  {
    "id": 8,
    "question": "Excess caulk removed and smudges cleaned"
  },
  {
    "id": 9,
    "question": "Finish is scratch free and paint is visually acceptable"
  },
  {
    "id": 10,
    "question": "Roof assembled per print overall size (+/-,25\",+/- 6mm)"
  },
  {
    "id": 11,
    "question": "Loose parts are accounted for (Raincap, heater bracket,radiator hatch/gasket, transformer bracket, silencer hardware, etc)"
  },
  {
    "id": 12,
    "question": "Foam Gasket is installed on Mounting Surface"
  },
  {
    "id": 13,
    "question": "Roof Join sealing tape applied per Hennig standard."
  }
]

[ScottR]

Here is what I did for a legacy list view:
Not certain how you need to set it up wherein the value for the checkbox should be the ID and used as the Item Key?

I simply created a transformer to return your data:

[bobthebear]

he's referring to this post

[SkylarP23]

@bobthebear

retoolInternal_rowKey

Thank your support so far. I followed your steps but the label of my checkbox or the content of a textbox would only repeat the first record like above. If i used query14.data[i].question for item keys it only shows the first question.

I tried different combinations for the item keys and textbox value as well but I either only got the first question repeated 13 times or nothing at all.

[SkylarP23]

Hello Scott,

thanks again for your help. What did you do in the transformer? I tried it based off your screenshots but I still only get the first question repeated 13 times.
Here's my transformer(I tried it without formatting it as an array as well):

[ScottR]

transformer20 returns the code you sent me:

Set up for listView is:

When I return the listView I see:

Checkbox component set up as:

[SkylarP23]

I'm really sorry Scott but it is still not working. I hardcoded the questions into the transformer like you did. I copied the item keys map function code you used as well. I am still getting only the first question repeated 13 times. I'm assuming the end of your transformer ends with return questions , is that correct?

I really appreciate your help. I'm not sure how I could be getting a different result than you when our code is matching

[ScottR]

Yes, it returns questions

If you want, PM me and I can jump on a google screen share to see what you're doing differently.

Also noticed you are using both a checkbox and a text field when it is not needed - only the checkbox and then the question will be the label of each checkbox... take a look at my checkbox set up and then look at how you are setting the data for the listView

[bobthebear]

@SkylarP23

If i used query14.data[i].question

use {{ query14.data }} for Item Keys or if you just want the questions as the keys (assuming they're all unique) it'd be {{ query14.data.map((item) => item.question }} this will make an array of just the questions

i actually didn't use a transformer, so I could keep the original query results (incase there was other data in there thats needed somewhere else). you could use one tho, it'd be:
return data.map((item) => item.question). there are other ways to do this that are special to javascript like return data.map({question} => {question}) which will return an array of objects each with 1 key named "question" and it's value. Loadash is available by default, so u could also use _.map() and _.pick

[SkylarP23]

The issue was this was a nested list, which I forgot to mention. So when I was trying to use {i} in the listView4_tst it was only ever referencing 0 because of the parent list.

[bobthebear]

ahhh, ya I haven't used nested lists yet. I do remember reading there is a {{ri}} variable for the nested index though if it helps out any? but again, I haven't had a chance to try it out.