Acces Observable data Array in Object

How-to Discussions
1

Hey, i find impossible to acces data from my MainView.ux

var questionData = Observable({
  flag: "SK_128.png",
  buttons: ["Slovakia", "Czechia"]
});

console.log(questionData.value.buttons[0]) //Print Slovakia

In UX i get nothing

<Text Value="{questionData.buttons[0]}" TextColor="#fff" Alignment="Center" Padding="10,0,10,0" />
2

a simple solution would be to create a seperate function to gain the value and then place that function in the UI

3

Thank you for your answer, but i find it very uneffective, for example i have 4 items in buttons array and 4 text elements each with different item from array. Does that mean i have to use 4 functions for each element? Why does this not work naturally?

4

No you can use the each in the UI

So in the ui you would do


<Each Items="{yourObject.arrayName}">
    <Text Value="{}" />
</Each>

Should help you get started

5

Yes, I would like to do this, but what about when each text element have different padding.

6

you should probably be using objects rather than arrays it’ll be easier to gain the information

7

But it will be pain to store information, because i randomly get the country name from JSON and store it to the array via loop. Nevermind then. I have some ideas how to get around this (hovever would not like to do that because it is just more variables to the code), just wanted to know if Im doing something wrong with databinding, why it is not working. Thank you anyways.

8

Ditto problem here. Have created an object from an API response, but I cannot access Array items:
Part of the JSON object:

"images": [
        {
          "type": "IMAGE",
          "key": "XS",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/mini/FC/6/9/6/9/9200000061769696.jpg"
        },
        {
          "type": "IMAGE",
          "key": "S",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/tout/FC/6/9/6/9/9200000061769696.jpg"
        },
        {
          "type": "IMAGE",
          "key": "M",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/6/9/6/9/9200000061769696.jpg"
        },
        {
          "type": "IMAGE",
          "key": "L",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/regular/FC/6/9/6/9/9200000061769696.jpg"
        },
        {
          "type": "IMAGE",
          "key": "XL",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/large/FC/6/9/6/9/9200000061769696.jpg"
        },
        {
          "type": "IMAGE",
          "key": "XXL",
          "url": "http://s.s-bol.com/imgbase0/imagebase3/extralarge/FC/6/9/6/9/9200000061769696.jpg"
        }
      ]

I want to grab images[2].url but it does not seem to be working in a my Each class:

<Each Items="{searchItems}">
	<DockPanel Margin="0,0,0,10">
		<Image Url="{images[2].url}" Dock="Left" />
		<Text Value="{title}" Margin="10" />
		<Text Value="{shortDescription}" Margin="10"  />
	</DockPanel>
</Each>

The title and shortDescription work fine.

9

Hi!

Array subscripts [2] in data bindings are currently not supported in UX markup (as of 0.28.1). Support for this is planned but not yet implemented.

For now you have to restructure your data in JS to make it work. Apologies for the inconvenience, will bump the priority on this issue.

10

If this was actually sent from a page using router

 router.push('somepage', {data: images});

How can one unwrap the this.Parameter in the ‘somepage’ to access the data node in the observable.