How to Loop Through an Array using Each

How-to Discussions
1

I have an array that looks like this:

[gallery] => Array
	(
		[0] => http://example.com/wp-content/uploads/2016/11/9ylWWJ53HEZdwApxugJp-729x700.jpg
		[1] => http://example.com/wp-content/uploads/2016/11/vqZtYZ3nbord3Es3aZZH-729x700.jpg
		[2] => http://example.com/wp-content/uploads/2016/11/Z2d8aTjA8eveHHpgdBfb-729x700.jpg
		[3] => http://example.com/wp-content/uploads/2016/11/FtsvWnBak6M9LArjXeJx-729x700.jpg
		[4] => http://example.com/wp-content/uploads/2016/11/a3bKftPjAKbKtX28zpni-729x700.jpg
		[5] => http://example.com/wp-content/uploads/2016/11/dED4a8JTzJjkdYvZa6AV-729x700.jpg
	)

In my JS file, I am receiving and exporting the array like this:

var item = this.Parameter;
var gallery = item.map(function(x) { return x.gallery; });

module.exports = {
	gallery: gallery
};

Then in my UX file, I am not sure what to put within the Image URL since my above array doesn’t have a common key.

<Each Items="{gallery}">
	<Image Url="{___what_should_i_put_here?___}" />
</Each>

Thanks

2

{} :slight_smile:

3

Hi Anders,

I tried your suggestion but it doesn’t work?

<Image Url="{}" />
4

Should work. Must be something else wrong with your code then…

5

Anders,

The gallery array comes from the clicked item from the list of posts view.

<Each Items="{posts}">
	<Text Value="{title}" Clicked="{go_to_single_item_page}" />
</Each>

Here’s the code of the go_to_single_post() function:

function go_to_single_post(arg){
	var item = arg.data;
	router.push("postSingle", item);
}

On my single post file I am receiving and exporting the gallery array like this:

var item = this.Parameter;
var gallery = item.map(function(x) { return x.gallery; });

module.exports = {
    gallery: gallery
};

Then as you suggested - I output the images on my single post file using Each like this:

<Each Items="{gallery}">
    <Image Url="{}" />
</Each>

It’s not working, but it worked when I tried to manually put the gallery array directly to my export module like this:

module.exports = {
    gallery: [
		"http://example.com/wp-content/uploads/2016/09/efhTujggJ3D9lDwpbplY-729x700.jpg",
		"http://example.com/wp-content/uploads/2016/09/jguLTTceCbynt94glmFv-320x700.jpg",
		"http://example.com/wp-content/uploads/2016/09/rMh36YzvyJxPcWocNfDo-320x700.jpg"
	]
};

My guess is something might be wrong with the mapping on this line: var gallery = item.map(function(x) { return x.gallery; });

When I try to console.log the gallery variable - I get this: {"_subscribers":[],"_isLeaf":false,"_values":[]} so I am not sure if the data is correct before it is passed to the module.export

Been trying to fix this for 2 days now, but still no luck. Please help?

6

Looks like you are passing an Observable to the Router. This is not allowed. The route must be serializeble and should only contain simple keys to identify the data the view should load.

Move the data model for your app to a stand alone .js file that you can require() whenever you need it, and do this.Parameter.map(function(p) { ... look up the model based on p ... })