locked
I try to bind data but WinJS.xhr doesn't work

    Question

  • Could someone tell me why WinJS.xhr doesn't work ??

    (function () {
        "use strict";

        var dataArray = [];

        var title, description, link, pubDate, aa;

        var urlText = "http://breakingnews.nationchannel.com/home/mobile_api/news.php?catcode=NNC&itemid=&format=xml&goback=";
        //  var uri = new Windows.Foundation.Uri(urlText);

            WinJS.xhr({ url: urlText }).then(function (xml) {

                var restXML = xml.responseXML;
                var items = restXML.selectNodes("/news/item");

                for (var j = 0 ; j < items.length ; j++) {
                    var item = items[j];

                    title = item.selectSingleNode("title").text;
                    description = item.selectSingleNode("description").text;
                    link = item.selectSingleNode("link").text;
                    pubDate = item.selectSingleNode("pubDate").text;

                    dataArray[j] = { title: title, description: description, link: link, pubDate: pubDate };
                }
            });

            dataArray[12] = { title: "Aaaa", description: "GGG" };

        var dataList = new WinJS.Binding.List(dataArray);

        var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("DataExample", publicMembers);

    })();

    HTML>-------------------

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div style="width: 150px; height: 100px;">

                <!-- Displays the "picture" field. -->
                <div>

                    <!-- Displays the "title" field. -->
                    <h4 data-win-bind="innerText: title"></h4>

                    <!-- Displays the "text" field. --> 
                    <h6 data-win-bind="innerText: description"></h6>
                </div>
            </div>
        </div>       

        <div id="basicListView" data-win-control="WinJS.UI.ListView" 
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'),layout: {type: WinJS.UI.ListLayout}}">
        </div>

    Thanks

                        
    Tuesday, May 08, 2012 8:30 AM

Answers

  • There are a couple of things you need to do:

    1. Add your items from the xhr routine to the dataList using the push method.

    Change:

    dataArray[j] = { title: title, description: description, link: link, pubDate: pubDate };

    to

    dataList.push({ title: title, description: description, link: link, pubDate: pubDate });

    2. Add a WinJS.UI.processAll(); at the end.

    Try this:

    (function () {
        "use strict";
        var dataArray = [];
    
        var title, description, link, pubDate, aa;
    
        var urlText = "http://breakingnews.nationchannel.com/home/mobile_api/news.php?catcode=NNC&itemid=&format=xml&goback=";
        //  var uri = new Windows.Foundation.Uri(urlText);
    
        WinJS.xhr({ url: urlText }).then(function (xml) {
    
            var restXML = xml.responseXML;
            var items = restXML.selectNodes("/news/item");
    
            for (var j = 0 ; j < items.length ; j++) {
                var item = items[j];
    
                title = item.selectSingleNode("title").text;
                description = item.selectSingleNode("description").text;
                link = item.selectSingleNode("link").text;
                pubDate = item.selectSingleNode("pubDate").text;
    
                dataList.push({ title: title, description: description, link: link, pubDate: pubDate }); //<---Change
            }
        });
    
        var dataList = new WinJS.Binding.List(dataArray);
    
        var publicMembers =
             {
                 itemList: dataList
             };
        WinJS.Namespace.define("DataExample", publicMembers);
    
        WinJS.UI.processAll(); //<---------Add this
    
    })();



    Tuesday, May 08, 2012 12:43 PM

All replies

  • There are a couple of things you need to do:

    1. Add your items from the xhr routine to the dataList using the push method.

    Change:

    dataArray[j] = { title: title, description: description, link: link, pubDate: pubDate };

    to

    dataList.push({ title: title, description: description, link: link, pubDate: pubDate });

    2. Add a WinJS.UI.processAll(); at the end.

    Try this:

    (function () {
        "use strict";
        var dataArray = [];
    
        var title, description, link, pubDate, aa;
    
        var urlText = "http://breakingnews.nationchannel.com/home/mobile_api/news.php?catcode=NNC&itemid=&format=xml&goback=";
        //  var uri = new Windows.Foundation.Uri(urlText);
    
        WinJS.xhr({ url: urlText }).then(function (xml) {
    
            var restXML = xml.responseXML;
            var items = restXML.selectNodes("/news/item");
    
            for (var j = 0 ; j < items.length ; j++) {
                var item = items[j];
    
                title = item.selectSingleNode("title").text;
                description = item.selectSingleNode("description").text;
                link = item.selectSingleNode("link").text;
                pubDate = item.selectSingleNode("pubDate").text;
    
                dataList.push({ title: title, description: description, link: link, pubDate: pubDate }); //<---Change
            }
        });
    
        var dataList = new WinJS.Binding.List(dataArray);
    
        var publicMembers =
             {
                 itemList: dataList
             };
        WinJS.Namespace.define("DataExample", publicMembers);
    
        WinJS.UI.processAll(); //<---------Add this
    
    })();



    Tuesday, May 08, 2012 12:43 PM
  • Just to add two notes:

    1. For the last promise in a chain (or a single promise), use .done instead of .then. This makes sure that exceptions inside the promise don't get swallowed in case there is a problem with the xhr call.

    2. Along the same lines, it's a good practice to include an error handler with then/done so you can see the exact nature of errors if they happen.

    .Kraig

    Tuesday, May 08, 2012 3:20 PM
  • Thanks a lot . I'll try it.
    Tuesday, May 08, 2012 5:45 PM
  • restXML.selectNodes(

    "/news/item") gives an error of "Object doesn't support property or method 'selectNodes' "
    Wednesday, August 08, 2012 10:49 AM
  • This is a very old post.  Release preview changed the type that gets returned.  You need to construct an XmlDocument object from the XHR return value:

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.data.xml.dom.xmldocument.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, August 08, 2012 3:35 PM
    Moderator