# Databinding Each Statement in UX

**URL:** <https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138>\
**Category:** How-to Discussions\
**Created:** [October 4, 2016, 11:35pm UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138 "2016-10-04T23:35:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [October 4, 2016, 11:35pm UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138/1 "2016-10-04T23:35:28Z")

</div>

Here is my problem, i have a observable list, i need to get the brand name from database using each “brand\_id” from the list observable e.g

```auto
var list = Observable({"id":"3","customer_id":"2","brand_id":"22"}, {"id":"4","customer_id":"2","brand_id":"18"});
var brand_name = Observable(
 brand_name = list.map(function(x){
			hh = db.query("SELECT * FROM brands WHERE id=(?)", x.brand_id);
			var r;
			 hh.forEach(function(param) {
 			   	r = param.name;
		 	});
			return r;
		});
);

module.exports = {
  list, brand_name
}

```

The UX

```auto
	<Each Items="{list}">
				<!-- Card -->
				<Panel Color="#fefefe" MinHeight="50" Margin="10,0,10,10">
					<Grid Columns="6*, 4*" Margin="10,5,10,0">
						<StackPanel>

							<Text Value="{customer_id}" Alignment="Left"></Text>

							<Text Value="{brand_name}" Alignment="Left"></Text>

							<Text Value="Quantity : 5000" Alignment="Left"></Text>
						</StackPanel>
						<Text Value="{total_amount}" TextWrapping="Wrap" FontSize="24" Alignment="CenterRight"></Text>
					</Grid>
					<DropShadow Distance="3" Size="-1" Angle="360" Color="#1188C9" />
				</Panel>
				<!-- Card -->
			</Each>

```

What logic can i use to get the brand name and how do i display in it in the UX??

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [October 5, 2016, 6:20am UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138/2 "2016-10-05T06:20:25Z")

</div>

Hi!

Your code looks very strange. Did you look through our documentation/videos on Observables?:  
[https://www.fusetools.com/docs/fusejs/observable](https://www.fusetools.com/docs/fusejs/observable)

This part in particular does not look right:

```auto
var brand_name = Observable(
 brand_name = list.map(function(x){
            hh = db.query("SELECT * FROM brands WHERE id=(?)", x.brand_id);
            var r;
             hh.forEach(function(param) {
                    r = param.name;
             });
            return r;
        });
);

```

The .map function itself returns an Observable, so you don’t need to wrap the result further in any way.  
Also, instead of exporting both the original list and the mapped one, just export the mapped on and instead just add the name to the mapped object:  
Try something like this:

```auto
var mapped_list = list.map(function(x){
    hh = db.query("SELECT * FROM brands WHERE id=(?)", x.brand_id);
    hh.forEach(function(param) {
        x.name = param.name;
    });
    return x;
});
module.exports = { mapped_list };

```

Then in your UX set `Each Items="{mapped_list}"` instead.

I hope this helps 🙂

---

<div class="post-metadata">

**Author:** ![sangosanyasegun](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sangosanyasegun](https://forums.fusetools.com/u/sangosanyasegun)\
**Post date:** [October 5, 2016, 9:02am UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138/3 "2016-10-05T09:02:34Z")

</div>

wow…its working .  
Thanks.

I now understand the way it works.

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [October 5, 2016, 6:51pm UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138/4 "2016-10-05T18:51:54Z")

</div>

The `forEach` is just setting `x.name` to the last parameter, shouldn’t you just do `x.name = hh[hh.length-1]` ?

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [October 6, 2016, 5:55am UTC](https://forums.fusetools.com/t/databinding-each-statement-in-ux/6138/5 "2016-10-06T05:55:46Z")

</div>

Yeah i think you’re right Edwin. I didn’t question that part of the code :S