# Accessing data from within Each callback

**URL:** <https://forums.fusetools.com/t/accessing-data-from-within-each-callback/4947>\
**Category:** How-to Discussions\
**Created:** [December 20, 2017, 8:25pm UTC](https://forums.fusetools.com/t/accessing-data-from-within-each-callback/4947 "2017-12-20T20:25:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kwame](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@Kwame](https://forums.fusetools.com/u/Kwame)\
**Post date:** [December 20, 2017, 8:25pm UTC](https://forums.fusetools.com/t/accessing-data-from-within-each-callback/4947/1 "2017-12-20T20:25:15Z")

</div>

I have a survey with a number of pages and each page has 5 options for a user to chose (note: the example code below does not prevent the user from picking more than one option). I would like to store these choices in an observable array, where each element holds the option selected on that page. The use case is that when a user fills out every option the answers are sent to an external API and various results are shown. But first I need to know what page/index I am on.

In the example code below I have tried to access page name (a proxy for the index) from the `printArgs` callback in the inner `Each` but it is null and the data context does not appear to have a way to “reach up” to the outer Each. The documentation on each ([https://www.fusetools.com/docs/fuse/reactive/each](https://www.fusetools.com/docs/fuse/reactive/each)) says `... You can, however, access nodes declared outside the Each from the inside.`

How do i access other data from an inner `Each` callback? If there is a better way to update an Observable array from an inner `Each` I’d like to know as well.

```auto
<Page ux:Class="Test_StandaloneEachDataContext">
    <JavaScript>
    	var Observable = require("FuseJS/Observable");
        var items = Observable(
                    { name: "Very Much", happy: Observable(false) },
                    { name: "Yeah, Kinda", happy: Observable(true) },
                    { name: "Not Really", happy: Observable(true) },
                    { name: "Nope", happy: Observable(false) },
                    { name: "Get me Away!", happy: Observable(true) }
                )

        var pages = Observable({name: "Page1"},
                     {name: "Page2"},
                     {name: "Page3"},
                     {name: "Page4"})

        function printArgs(args){
        	console.log("clicked item data context: " + JSON.stringify(args));
            console.log(this.name + " is the page we're on!")
            console.log("Data context? " + Object.keys(this))
        }

        module.exports = {
            items: items,
            pages: pages,
            printArgs: printArgs
        };
    </JavaScript>

    <Rectangle ux:Class="SelectableRectangle2" Height="35" CornerRadius="2" Color="{Property SelectionColor}">
            <string ux:Property="Text" />
            <float4 ux:Property="SelectionColor" />
            <Rectangle ux:Dependency="backgroundRect" />

            <Text Value="{ReadProperty Text}" />

            <Attractor ux:Name="colorAttractor" Target="backgroundRect.Color" Value="#fff" Type="Easing" Duration="0.2" DurationExp="0" />
            <Selected>
                <Set colorAttractor.Value="{Property SelectionColor}" />
            </Selected>
            
            <WhileSelected>
                <Scale Factor="1.3" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
            </WhileSelected>

            <Clicked >
                <ToggleSelection />
            </Clicked>
    </Rectangle>

    <PageControl Padding="24,32,24,8">
        <Each Items="{pages}">
            <StackPanel>
                    <StackPanel Alignment="Center" ItemSpacing="6" Margin="0, 10, 0, 0" Padding="0, 0, 0, 0">
                        <Rectangle Layer="Background" Color="White" CornerRadius="3" />
                        <Each Items="{items}">
                            <SelectableRectangle2 Clicked="{printArgs}" SelectionColor="#EC407A" backgroundRect="background" Text="{name}" />
                        </Each>
                    </StackPanel>
                <Rectangle ux:Name="background" Color="#fff" />
            </StackPanel>
        </Each>
    </PageControl>
</Page>

```

---

<div class="post-metadata">

**Author:** ![Kwame](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@Kwame](https://forums.fusetools.com/u/Kwame)\
**Post date:** [December 21, 2017, 8:48pm UTC](https://forums.fusetools.com/t/accessing-data-from-within-each-callback/4947/2 "2017-12-21T20:48:39Z")

</div>

After searching the forums for hints I came across [this question](https://www.fusetools.com/community/forums/permalink/8f9a6065-36dd-4e80-b158-7bd39cc2eb3e) where it turns out that `PageControl` doesn’t have a javascript api. I don’t think that’s quite relevant to this issue but the resolution uses properties and dependencies, which is a preferred way to interconnect components. So the following just uses an observable, updated by PageControl, that allows me to access “external” data within an `Each` callback. In this case I use the `ActiveIndex` instead of accessing `Pages.name` and that’s good enough for now.

```auto
<Page ux:Class="Test_StandaloneEachDataContext">
    <JavaScript>
    	var Observable = require("FuseJS/Observable");

        var activeIndex = Observable(0)

        var items = Observable(
                    {itemname: "Very Much"},
                    {itemname: "Yeah, Kinda"},
                    {itemname: "Not Really"},
                    {itemname: "Nope"},
                    {itemname: "Get me Away!"}
                )

        var pages = Observable(
                     {name: "Page1"},
                     {name: "Page2"},
                     {name: "Page3"},
                     {name: "Page4"}
                    )

        function printMe(arg){
            console.log("You're on Page : " + JSON.stringify(activeIndex.value));
        }

        module.exports = {
            items: items,
            pages: pages,
            printMe: printMe,
            activeIndex: activeIndex
        };
    </JavaScript>

    <Rectangle ux:Class="SelectableRectangle2" Height="35" CornerRadius="2" Color="{Property SelectionColor}">
            <string ux:Property="Text" />
            <float4 ux:Property="SelectionColor" />
            <Rectangle ux:Dependency="backgroundRect" />
            <string ux:Property="Page" />
            <PageControl ux:Dependency="MyPage" />

            <Text Value="{ReadProperty Text}" />

            <Attractor ux:Name="colorAttractor" Target="backgroundRect.Color" Value="#fff" Type="Easing" Duration="0.2" DurationExp="0" />
            <Selected>
                <Set colorAttractor.Value="{Property SelectionColor}" />
            </Selected>
            
            <WhileSelected>
                <Scale Factor="1.3" Duration="0.5" Easing="BackOut" EasingBack="BackIn" />
            </WhileSelected>

            <Clicked >
                <ToggleSelection />
                <Callback Handler="{printMe}" />
            </Clicked>
    </Rectangle>

    <PageControl Padding="24,32,24,8" ActiveIndex="{activeIndex}" ux:Name="nav">
        <Each Items="{pages}">
            <StackPanel>
                    <StackPanel Alignment="Center" ItemSpacing="6" Margin="0, 10, 0, 0" Padding="0, 0, 0, 0">
                        <Rectangle Layer="Background" Color="White" CornerRadius="3" />
                        <Each ux:Name="myEach" Items="{items}">
                            <SelectableRectangle2 MyPage="nav" Page="{name}" ux:Name="selected" SelectionColor="#EC407A" backgroundRect="background" Text="{itemname} {name}" />
                        </Each>
                    </StackPanel>
                <Rectangle ux:Name="background" Color="#fff" />
            </StackPanel>
        </Each>
    </PageControl>
</Page>

```