locked
ListView's itemDataSource as a JSON.parse'd value

    Question

  • I'm currently parsing some xml and I can get it to console.log a piece of it if I use:

    console.log(JSON.parse(result.response).Category);

    "result" being the parameter from my .done function, and "category" being a parameter from my xml. 

    I currently have a listView and I want text to be inside that is the same as what the console.log returns. I'm not sure how to do it. 

    My first idea was to have the itemDataSource be set in the HTML to my JSON.parse(result.response) and then just do innerText: Category.  I don't know how to set the itemDataSource to that though because my below way of doing it didn't work:

    below is the template with the innerText: category code inside of it. 

    followed by the listview.

    then the javascript.

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    		        <div class="mediumListIconTextItem">
    			        <img id="fix5" src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
    			        <div class="mediumListIconTextItem-Detail">
    				        <h4 data-win-bind="innerText: category"></h4>
    			        </div>
    		        </div>
    	        </div> 
    <div id ="listView" 
    		            class="win-selectionstylefilled" 
    		            data-win-control="WinJS.UI.ListView"
    		            data-win-options="{itemDataSource: value, 
    				            itemTemplate: select('#mediumListIconTextTemplate'), 
    				            selectionMode: 'single', 
    				            tapBehavior: 'invoke', 
                                tapBehavior: 'toggleSelect',
    				            swipeBehavior: 'none', 
    				            layout: { type: WinJS.UI.ListLayout } 
    		            }">
    	            </div>
     .done(function complete(result) {
                        databaseInfo = listView.itemDataSource;
                        listView.itemDataSource = JSON.parse(result.response);

    btw, the error this throws is: Object doesn't support property or method 'createListBinding'



    • Edited by ZachAtttack Wednesday, July 10, 2013 8:56 PM added error message
    Wednesday, July 10, 2013 8:48 PM

Answers

  • Hi,

    You should do something like this:

     listView.itemDataSource = (new WinJS.Binding.List(JSON.parse(result.responseText)).dataSource;

    Make sure you are actually getting JSON and not XML (your last post shows an XML, so Im not sure if you changed the source or not).

    The JSON must also represent an Array, that's the required input for the creation of the BindingList, for example:

    [
    {"Category":"Groceries", "Id":"1", "Name":"Tomato soup", 
    "Price":"1.39" },
    {"Category":"Toys", "Id":"2", "Name":"Yo-yo", "Price":"3.75" },
    {"Category":"Hardware", "Id":"3", "Name":"Hammer", "Price":"16.99" }
    ]

    The error you are getting is because your JSON it's not correctly formatted or it's not an Array.


    • Edited by Ealsur Friday, July 12, 2013 8:02 PM Fixed example
    • Marked as answer by ZachAtttack Wednesday, July 17, 2013 1:48 PM
    Friday, July 12, 2013 8:02 PM

All replies

  • Hello,

    Would you mind letting us know how you using createListBinding() method. the correct way using it please refer: http://msdn.microsoft.com/en-us/library/windows/apps/br212606.aspx

    Here is a simple sample demonstrates how to obtain value form a JSON data source in the following thread, please refer: 

    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/9db73fd8-851c-4f96-91d8-326e0235b2cf/problem-using-xhr-to-get-data-and-then-show-in-listview-control

    If you need further assistance, please feel free to let me know.Thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, July 12, 2013 8:51 AM
    Moderator
  • I'm currently not using createListBinding(). I'm not actually sure what it does, but I have seen the other link you posted before. I tried plugging my url in for it, but the line that screws up for me is:

    var postList = new WinJS.Binding.List(response.data.children);

    I've tried playing a little bit with it to no avail. 

    The data that my url shows is the following, I don't think .children will work for it:

    <ArrayOfProduct xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/ProductStore.Models">
    <Product>
    <Category>Groceries</Category>
    <Id>1</Id>
    <Name>Tomato soup</Name>
    <Price>1.39</Price>
    </Product>
    <Product>
    <Category>Toys</Category>
    <Id>2</Id>
    <Name>Yo-yo</Name>
    <Price>3.75</Price>
    </Product>
    <Product>
    <Category>Hardware</Category>
    <Id>3</Id>
    <Name>Hammer</Name>
    <Price>16.99</Price>
    </Product>
    </ArrayOfProduct>


    Friday, July 12, 2013 3:33 PM
  • Hi,

    You should do something like this:

     listView.itemDataSource = (new WinJS.Binding.List(JSON.parse(result.responseText)).dataSource;

    Make sure you are actually getting JSON and not XML (your last post shows an XML, so Im not sure if you changed the source or not).

    The JSON must also represent an Array, that's the required input for the creation of the BindingList, for example:

    [
    {"Category":"Groceries", "Id":"1", "Name":"Tomato soup", 
    "Price":"1.39" },
    {"Category":"Toys", "Id":"2", "Name":"Yo-yo", "Price":"3.75" },
    {"Category":"Hardware", "Id":"3", "Name":"Hammer", "Price":"16.99" }
    ]

    The error you are getting is because your JSON it's not correctly formatted or it's not an Array.


    • Edited by Ealsur Friday, July 12, 2013 8:02 PM Fixed example
    • Marked as answer by ZachAtttack Wednesday, July 17, 2013 1:48 PM
    Friday, July 12, 2013 8:02 PM