How To Show Data From Array In Windows 8 App

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

Solution 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 arrayvar bindinglist = newWinJS.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.

Solution 2:

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

<pdata-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.