How can I give every item in <Each.. a position number

How-to Discussions
1

I would like to create a queue, where items can be added and also removed.

So there should be a number for every item, so that it looks like here (1,2,3…):
file

My ux code looks like this:

<ScrollView>
    <StackPanel>
        <Each Items="{items}">
           <Rectangle Height="100">
              <Text Value="{Position}" />
           </Rectangle>
        </Each>
    </StackPanel>
</ScrollView>

But for the JavaScript part I’m not sure and need your help :frowning:

var items = Observable();

function addItem(item){
	items.add(item);
}

function removeItem(item){
	items.remove(item);
}

How can I set the positions?

2

Let’s say your data looks like ['a', 'b', 'c']

You would do:

var items = Observable();
var data = ['a', 'b', 'c'];
data.forEach(function(letter, index) {
  items.add({ Position: index+1 });
});
3

Thank you Edwin! It works that it shows the position, but I have a problem.

Inside the items I have now user objects, which are defined in my database as:

{
	id: 22,
	name: "Edwin",
	category: 2,
	level: 42,
	followers: 21,
	following: 7

},

And I’m adding a user to the items Observable like this:

items.add(Contenxt.getUser(id));

Now I’m not sure how I could add the Position to this structure. With your code, it will create empty items, which have a position and items with content but without a position.

I don’t want to add an entry “Position” for a user in my database, because the Position will often change.

Could you help me here?

4

You could do away with a reactive mapping in this case.
I didn’t test the code below, but it should be pretty close:

var mapped = items.map(function(item,index) { // this here basically subscribes to updates in items variable, and loops through it every time items value changes
    item.position = index; // this here adds a new property called "position" to the item object, so make sure you do not use a name already present in the object
    return item; // and then it returns the slightly modified item at its position
});
// in the very end, mapped looks just like items, with an added "position" property to every object
// and it updates behind-the-scenes with every change to items

and when you have that, add the mapped variable to your module.exports and use it instead of items.
the items var still has to be filled like you did before, and this new mapped updates itself reactively with every change to items.

Edit: link to docs for reference - https://www.fusetools.com/docs/fusejs/observable#map-func-item-index

5

P.S. I personally think Ms. Audrey should have made top 3 :slight_smile:

6

Thank you Uldis!!! It works :)))

And also thank you for the comments, they helped understanding every detail :slight_smile:

7

I’d stick with the reactive way but another way would be:

Where you call items.add(Contenxt.getUser(id)); I’m assuming you’re using forEach or something so you could do:

data.forEach(function(id, index) {
  items.add({
    data: Contenxt.getUser(id),
    position: index+1
  });
})