# How to Loop Through an Array using Each

**URL:** <https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223>\
**Category:** How-to Discussions\
**Created:** [November 25, 2016, 7:40am UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223 "2016-11-25T07:40:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carlo\_Fontanos](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/carlo_fontanos/32/267_2.png) [@Carlo\_Fontanos](https://forums.fusetools.com/u/Carlo_Fontanos)\
**Post date:** [November 25, 2016, 7:40am UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/1 "2016-11-25T07:40:31Z")

</div>

I have an array that looks like this:

```auto
[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:

```auto
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.

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

```

Thanks

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [November 25, 2016, 7:55am UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/2 "2016-11-25T07:55:11Z")

</div>

`{}` 🙂

---

<div class="post-metadata">

**Author:** ![Carlo\_Fontanos](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/carlo_fontanos/32/267_2.png) [@Carlo\_Fontanos](https://forums.fusetools.com/u/Carlo_Fontanos)\
**Post date:** [November 25, 2016, 8:50am UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/3 "2016-11-25T08:50:22Z")

</div>

Hi Anders,

I tried your suggestion but it doesn’t work?

```auto
<Image Url="{}" />

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [November 25, 2016, 9:27am UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/4 "2016-11-25T09:27:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Carlo\_Fontanos](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/carlo_fontanos/32/267_2.png) [@Carlo\_Fontanos](https://forums.fusetools.com/u/Carlo_Fontanos)\
**Post date:** [November 26, 2016, 5:16pm UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/5 "2016-11-26T17:16:53Z")

</div>

Anders,

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

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

```

Here’s the code of the go\_to\_single\_post() function:

```auto
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:

```auto
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:

```auto
<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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [November 26, 2016, 5:36pm UTC](https://forums.fusetools.com/t/how-to-loop-through-an-array-using-each/5223/6 "2016-11-26T17:36:35Z")

</div>

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 ... })`