How do I populate rows from an array...

Hello C2 folks, I posted this question in the C3 forums but am having no luck in getting an answer. I’m guessing the solution will be similar for both C2 and C3.

Basically, I have an array that I need to use to populate a series of product listings.

The original forum question is here: https://www.scirra.com/forum/populate-rows-from-an-array_t198294

Can anyone help with this?

Thanks all

Your guess there is right. Just use AJAX, load the array from LastData and run a loop.

Something like:

System | Repeat array.Width times |  Create productBox at columnX, loopindex * (productBox.Height + boxSpacer)
                                  | Load imagePlaceholder from array.At(4)
                                  | Set productName.Text to array.At(1)
                                  | Set cost.Text to array.At(0)
                                  | Set shortDesc.Text to array.At(2)

productBox | On Created | Spawn productName at imagepoint(0)
                        | Spawn cost at imagepoint(1)
                        | Spawn shortDesc at imagepoint(2)
                        | Spawn imagePlaceholder at imagepoint(3)
                        | Spawn selectButton at imagepoint(4)
[/code:1gkhwgxy]

Note you must create all those imagepoints in the productBox sprite and position the at the positions the other graphic elements should be spawned. You could use the container approach, but I prefer spawning stuff at the positions rather than creating everything and then positioning everything relative to the productBox.

Also, if you have few products and will never add more, you may have all images as frames of one sprite and just set the frame accordingly. But it would be a terrible idea if this product list must be scalable.

Thanks for replying Bruno

Based on your answer, this is what I've managed so far:

I have a couple of questions.

• Create productBox at columnX, loopindex * (productBox.Height + boxSpacer) - I'm guessing productBox is am image, is this correct? Also, how do I add the actions at columnX, loopindex * (productBox.Height + boxSpacer)
• Load imagePlaceholder from array.At(4) - Do I just add the object name of each image in column 4 of the Array?
• Spawn XXX at imagepoint(XXX) - how do I use Spawn? It's not available as an action.
• What is an imagepoint and how do I create one?

Thanks for your help on this.

Thanks for replying Bruno

Based on your answer, this is what I've managed so far:

I have a couple of questions.

• Create productBox at columnX, loopindex * (productBox.Height + boxSpacer) - I'm guessing productBox is am image, is this correct? Also, how do I add the actions at columnX, loopindex * (productBox.Height + boxSpacer)
• Load imagePlaceholder from array.At(4) - Do I just add the object name of each image in column 4 of the Array?
• Spawn XXX at imagepoint(XXX) - how do I use Spawn? It's not available as an action.
• What is an imagepoint and how do I create one?

Thanks for your help on this.

First of all, your Repeat loop should be nested inside the Ajax>On completed event. Now to your doubts:

1. Yeah, it's a bogus name for a Sprite object that would be the base of your list item. When you create an object it will ask you for the X, the Y and the layer at which it will be created. In my example, I calculate the Y based on the height of the box and the spacing between boxes.

2. In my example I'm loading an external image, so in that case you would add the relative or absolute url of the image. Adding all images as individual sprites is very cumbersome and I'd strongly recommend you don't do that. You may use the approach I mentioned and create one sprite and storing product images as its frames. In that case, the image column would just tell the frame to go to. Also, notice that array indexes start at 0, so 4 is, actually, the fifth column.

3. "Spawn another object" is an object action, that is, you'll got to "productBox>Spawn another object" (or whatever name you use for your product box).

4. Spawn requires the new object to be created at an imagePoint. Imagepoints are like "hotspots" you can add to a Sprite object. All Sprite objects have one imagepoint (index 0) by default, which is their origin. You can add more imagepoints by opening the Sprite in edit mode and picking the tool that looks like an aim or crosshairs. When you pick the tool a window will show a list of all imagepoints for that image. You can add new ones using that window.

Hope this helps. Cheers!

Here's a capx:

https://www.dropbox.com/s/ttr7p03szz89v ... .capx?dl=1

Cheers!

Wow! Amazing thank you. Exactly what I was after - I appreciate the capx.

My product images will all be separate sprites so I'll look into how to bring in individual sprite objects as opposed to animation frames.

Thank you

Hi Bootfit!

Here's a capx using absolute URLs to load images from outside the app into a placeholder.

https://www.dropbox.com/s/hzpxh6x272h21 ... .capx?dl=1

IMPORTANT NOTE: I changed the productImage from a Sprite object to a TiledBackground object. This is necessary because all instances of a Sprite object will load the same image, while instances of a Tiled Background may have different images loaded to them.

Hope this helps. Cheers!