Iterate through two or more observables at the same time

How-to Discussions
1

Hi guys,

At the moment I have a titles observable that contains a load of string. I’m displaying these strings in my UX with an <Each /> tag. I have two other observables with paths to some images that I’d like to display. I’m not sure if it’s the best way to do it but how would I display the corresponding image depending on the string?

For example:

The string is Warriors 128-120 Mavericks, to the left of ‘Warriors’ I’d like to display the image located at “teams/Warriors.png” and to the right of ‘Mavericks’ the same. And this needs to be for each iteration of my Each tag.

If anyone could help that would be great! Many thanks:)

2

Depends on whether you have those images locally or you’re grabbing them via a url.

Locally:

You’ll need to use <FileImageSource> like so:

I’m not sure if you can actually databind the ux:Key on <FileImageSource> via observable values if not just inline each file

<Each Items="{teams}>
  <FileImageSource ux:Key="{name}" File="{file} />
</Each>

In your JS:

var teams = Observable(
    {name: 'Warriors', file: 'teams/Warriors.png'},
    ... // do the same for each team
);

Now for displaying the images:

<Each Items="{data}">
 <Image Source="{DataToResource name}" />
 ... // stuff
</Each>

In your JS:

var data = Observable({
  {name: 'Warriors', ... // extra data},
  ...
});

Or just have it in one Observable, but the point is that name in {DataToResource name} has to match the ux:Key="{name}" property.

Learn more from: https://www.fusetools.com/learn/fuse#datatoresource

3

Many thanks!:slight_smile: