How to show data from array in windows 8 app

Question

I have a problem displaying information in an array with windows 8 app, I send information to the view with this.

var details = document.querySelector(".articlesection");

var data = [{
    "id": "1",
    "title": "Title text",
    "files": [
        {
            "id": "1",
            "title": "File1"
        },
        {
            "id": "2",
            "title": "File2"
        }
    ]
}];


binding.processAll(details, data);

I receive the data in the view like this (This works, but cant get info from the files array)

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
</div>

How can i make it show the 2 objects in the array? If I try

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <p data-win-bind="textContent: files">
        <!-- i get [Object object], [Object object] -->
    </p>
</div>

So clearly here is some data, So how can I do it if I want it like this. (Foreach doesnt exists, but I wanted to show how I want to do)

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <ul data-win-bind: foreach: files>
        <!-- Foreach all files, how can I do this? Foreach doesn't exist. -->
        <li>
            <span data-win-bind="textContent: id"></span> 
            <span data-win-bind="textContent: title"></span>
        </li>
    </ul>
</div>

Regards, Jim

possible duplicate of WinJS ListView and Template Binding

Dominic Hopton
– Dominic Hopton

2013-02-26 15:28:23 +00:00
Commented Feb 26, 2013 at 15:28 — Dominic Hopton
– Dominic Hopton, Commented Feb 26, 2013 at 15:28

Szymon Rozga · Accepted Answer · 2013-02-26 14:10:55Z

1

Use the WinJS.UI.ListView control.

Edit because I wrote this from the train: A WinJS ListView control is what you want to use to display a list of objects. The control gives you the ability to indicate a type of layout (list or grid layout) and define behaviors around what (if anything) happens when an item is tapped. You get to provide an itemTemplate for each item or you can create custom templating functions that render all kinds of different magical things depending on your item.

This is a quick sample of how you would use it.

<div id='lv' data-win-control='WinJS.UI.ListView' />

var lv = $('#lv')[0].winControl;
var data = ...; // some js array
var bindinglist = new WinJS.Binding.List(data);
lv.itemDataSoutce = bindinglist.dataSource;
lv.itemTemplate = function(itemPromise) {
    return itemPromise.then(function(item) {
        var f = $('<div></div>');
        f.text(item.title);
    });
};

See this for an example of how to use it. Shameless plug, I wrote an article about how WinJS controls work. Might be some good background reading.

ItemTemplate can also be an HTML template (see WinJS control WinJS.Binding.Template). If you want you can also reuse other template libraries like Mustache.JS and hook them in through the itemTemplate function. Here is an article I wrote about reusing Knockout templates in WinJS.

edited Feb 26, 2013 at 14:10

answered Feb 26, 2013 at 12:40

Szymon Rozga

18.2k7 gold badges56 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rubin Over a year ago

Can you desribe more please? This is already in a listview, do i need to create one more or what?

Szymon Rozga Over a year ago

Done. It contains a fairly large amount of functionality but helps you get lists to have that Win8 look & feel.

Dominic Hopton Over a year ago

Try this: stackoverflow.com/questions/13337489/…

rubin Over a year ago

Hi Dominic, i tried to use list inside of a list, but your anwers says that you cant do that. I have tried your example aswell. The thing is that i use the Microsoft SplitApp as basic. Then im in split.js in the function _selectionChanged: function (args) { where i want to show specific meetingdata. But files only return object object. I have tried to use your solution 1, but it never show any data in the view

Gergely Orosz · Accepted Answer · 2013-03-01 22:28:18Z

Use converters to solve this issue. In your example code instead of this line:

<p data-win-bind="textContent: files"></p> // i get [Object object], [Object object]

You can just add in a converter as such

<p data-win-bind="innerHTML: files myFilesToStringConverter"></p>

And define your converter in the .js file e.g.

var myFilesToStringConverter = WinJS.Binding.converter(function(files){
   var convertedValue = "<ul>";
   for(var i=0;i<files.length;i++){
      convertedValue += "<li><span>" +files[i].id + "</span> <span> " + files[i].title + "</span></li>";
   convertedValue += "<ul>";
   return convertedValue ;
   }
});

With this converter in place you'll see the IDs and names of the files listed as expected.

Collectives™ on Stack Overflow

How to show data from array in windows 8 app

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related