Loop over array of strings

How-to Discussions
1

Hello I’m trying how to implement an Each clause if I have an array of strings instead of objects, for example:

 {
        "name": "Header",
        "contents": [
          "Text 1",
          "Text 2",
          "Text 3",
          "Text 4"
        ]
 }```

I'm trying to display *Text 1* to *Text 4* it inside a `Text` component.
2

Hi Erick,
there are several things you have to make sure you do:

  1. Make the array accessible to UX by adding it to your module.exports. Either export the whole object you have there, or map to the inner array directly, it doesn’t make a huge difference. Something like this should do:
var obj = {
    "name":"Header",
    "contents": [
        "Text 1",
        "Text 2",
        "Text 3",
        "Text 4"
    ]
};
module.exports = {
    "myobject":obj
};
  1. In your UX, data-bind your Each to the exported array:
<Each Items="{myobject.contents}">
    <!-- ... -->
</Each>
  1. And for the last thing on this, if you want to access a literal value inside of an array, you have to reference that with simple empty curly braces, like this:
<Each Items="{myobject.contents}">
    <Text Value="{}" />
</Each>

You might also want to enclose your Each within a StackPanel to keep the items neatly stacked on top of each other, but let’s leave this for you to figure out further.

3

It worked! Thanks!