# Observable List declaration vs Each tag

**URL:** <https://forums.fusetools.com/t/observable-list-declaration-vs-each-tag/4085>\
**Category:** How-to Discussions\
**Created:** [October 14, 2016, 4:51pm UTC](https://forums.fusetools.com/t/observable-list-declaration-vs-each-tag/4085 "2016-10-14T16:51:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![josemanuelp2](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/josemanuelp2/32/59_2.png) [@josemanuelp2](https://forums.fusetools.com/u/josemanuelp2)\
**Post date:** [October 14, 2016, 4:51pm UTC](https://forums.fusetools.com/t/observable-list-declaration-vs-each-tag/4085/1 "2016-10-14T16:51:39Z")

</div>

Hi!

I’m trying to make it work the following observable list called listItems:

```auto
var steps = [
  { id: "0", caption: "title1",
    listItems: [
              { title: "value1", value: "value1" },
              { title: "value2", value: "value2" },
              { title: "value3", value: "value3" }
          ] },
  { id: "1", caption: "title2",
    listItems: [
              { title: "value1", value: "value1" },
              { title: "value2", value: "value2" },
              { title: "value3", value: "value3" }
          ] }
];

var actualQuestion = Observable(0);
var listItems = Observable(steps[actualQuestion.value].listItems);
var caption = Observable(steps[actualQuestion.value].caption);

questionList.onParameterChanged( function(param) {
    actualQuestion.value = param;
})

```

This is the corresponding template:

```auto
...
<BodyText Alignment="CenterLeft" Value="{caption}"/>
...
<Each Items="{listItems}">
    <ListItem Title="{title}" Value="{value}" />
</Each>
...

```

The caption observable works fine, but not the listItem observable. In this case it seems that the UI only sees an empty array. I don’t know where is the error if it in the observable declaration or in the template.

Would appreciate any help.

Thanks

---

<div class="post-metadata">

**Author:** ![josemanuelp2](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/josemanuelp2/32/59_2.png) [@josemanuelp2](https://forums.fusetools.com/u/josemanuelp2)\
**Post date:** [October 15, 2016, 3:25pm UTC](https://forums.fusetools.com/t/observable-list-declaration-vs-each-tag/4085/2 "2016-10-15T15:25:47Z")

</div>

It seems that putting an array as an argument in the Observable instantiation, makes it a scalar variable rather than Observable list.

I could make it work by using an external loop to take into account the scalar variable, and let inner loop ({}) iterates the elements. Now it works.

```auto
        <Each Items="{listItems}">
          <Each Items="{}">
          	<ListItem Title="{title}" Value="{value}" />
          </Each>
        </Each>

```