locked
SemanticZoom question RRS feed

  • Question

  • The code below is for a SemanticZoom (see (A)). It works fine. But what I want to do is substitute the following code (see (B)) for the inline data input

    Is there a problem using this code with the structure in the javascript file. I have not been able to get it to work 

    thanks for any help

    (B)

    var myList = new Array();
        WinJS.xhr({ url: "/data/IceCream.Json" }).then(function (xhr) {
            var items = JSON.parse(xhr.responseText);
            // Add the items to the WinJS.Binding.List
            items.forEach(function (item) {
                myList.push(item);
            });
        }); 

    Below the current working code 

    (A)

    (function () {
        "use strict";
        var myData = [
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
        { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
        { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" }
        ];
        var itemsList = new WinJS.Binding.List(myData);

         function compareGroups(leftKey, rightKey) {
            return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
        }

        function getGroupKey(dataItem) {
            return dataItem.title.toUpperCase().charAt(0);
        }
        function getGroupData(dataItem) {
            return {
                title: dataItem.title.toUpperCase().charAt(0)
            };
        }
        var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);
        
        WinJS.Namespace.define("myData",
            {
                groupedItemsList: groupedItemsList
            });

    })();

    Wednesday, May 22, 2013 1:11 AM

Answers

All replies

  • Try it this way

    var myList = new Array();
    var getData = function(){
        WinJS.xhr({ url: "/data/IceCream.Json" }).then(function (xhr) {
            var items = JSON.parse(xhr.responseText);
            // Add the items to the WinJS.Binding.List
            items.forEach(function (item) {
                myList.push(item);
            });
        }); 
    }
    var listItem = new WinJS.Binding.List(getData);
    /// code to group 

    Since you are making an xhr call to get the data from the service. The grouping

    of the data will not wait untill the data is filled into binding list.

    • Edited by Ramya SJ Wednesday, May 22, 2013 8:50 AM
    Wednesday, May 22, 2013 8:47 AM
  • rege1_1, I have included the results for listItem but the data doesn't seem to be there - it does show up in the myList array so the function is working but not passing the data. 

    thanks

     


    • Edited by baryo Wednesday, May 22, 2013 7:09 PM
    Wednesday, May 22, 2013 5:21 PM
  • I have found the answer to my personal problem. The following link did the trick and if you are just getting into ListView and especially Semantic Zoom it will be helpful.

    http://www.youtube.com/watch?v=LKvFOpTJzUs

    • Marked as answer by baryo Friday, May 24, 2013 9:29 PM
    Friday, May 24, 2013 9:29 PM