Databinding Each Statement in UX

How-to Discussions
1

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

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

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

2

Hi!

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

This part in particular does not look right:

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:

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 :slight_smile:

3

wow…its working .
Thanks.

I now understand the way it works.

4

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

5

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