Iterate through two or more observables at the same time

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

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


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} />

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

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:

Many thanks!:slight_smile: