locked
Issue with custom data source sample?

    Question

  • Hello all!

    I got an issue with the following custom data source sample: http://code.msdn.microsoft.com/windowsapps/ListView-custom-data-4dcfb128

    When I enter my Bing API key and then click on "Search" or on "Save key", an error is raised:

    {
       "exception":null,
       "error":{
          "name":"noResponse",
          "message":"noResponse"
       },
       "promise":{
          "_value":{
             "name":"noResponse",
             "message":"noResponse"
          },
          "_isException":false,
          "_errorId":4
       },
       "id":4
    }

    Does somebody have the same issue? How can I get more details about this error?

    Thanks a lot! :)



    Tuesday, July 3, 2012 3:30 PM

Answers

  • Hi,

    That sample was built against an earlier version of Bing Search API. Please upgrade it to the Windows Azure Marketplace version.
     
    First, you can obtain a key from Marketplace: https://datamarket.azure.com/account/info
     
    Then use any base64 tool to encode the key. Note while the key seems to be already base64 encoded, please encode it again.
     
    Then change the code:
     
    Modify getCount in BingImageSearchDataSource.js:
     
                // Called to get a count of the items
                // The value of the count can be updated later in the response to itemsFromIndex
                getCount: function () {
                    var that = this;
     
                    // Build up a URL to request 1 item so we can get the count
                    var requestStr = "https://api.datamarket.azure.com/Bing/Search/Image?";
                    requestStr += "Query='" + that._query + "'";
                    requestStr += "&$format=json";
     
                    //Return the promise from making an XMLHttpRequest to the server
                    return WinJS.xhr({ url: requestStr, headers: { "Authorization": "Basic YourEncodedKey" } }).then(
     
                        //Callback for success
                        function (request) {
                            var data = JSON.parse(request.responseText);
     
                            //Bing may return a large count of items, but it can only be fetched the first 1000, so we max the count at that.
                            try {
                                return data.d.results.length;
                            } catch (err) {
                                return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.noResponse));
                            }
                        },
                        function (request) {
                            return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.noResponse));
                        });
                },
     
     
    Modify the xhr part of the itemsFromIndex method:
     
                    //Build up the URL for the request
                    var requestStr = "https://api.datamarket.azure.com/Bing/Search/Image?";
                    requestStr += "Query='" + that._query + "'";
                    requestStr += "&$format=json";
     
                    //Return the promise from making an XMLHttpRequest to the server
                    return WinJS.xhr({ url: requestStr, headers: { "Authorization": "Basic YourEncodedKey" } }).then(
     
                        //Callback for success
                        function (request) {
                            var results = [], count;
     
                            // Use the JSON parser on the results, safer than eval
                            var obj = JSON.parse(request.responseText);
     
                            // Verify if the service has returned images
                            if (obj.d !== undefined) {
                                var items = obj.d.results;
     
                                // Data adapter results needs an array of items of the shape:
                                // items =[{ key: key1, data : { field1: value, field2: value, ... }}, { key: key2, data : {...}}, ...];
                                // Form the array of results objects
                                for (var i = 0, itemsLength = items.length; i < itemsLength; i++) {
                                    var dataItem = items[i];
                                    results.push({
                                        key: (fetchIndex + i).toString(),
                                        data: {
                                            title: dataItem.Title,
                                            thumbnail: dataItem.Thumbnail.MediaUrl,
                                            width: dataItem.Width,
                                            height: dataItem.Height,
                                            linkurl: dataItem.MediaUrl
                                        }
                                    });
                                }
                                // Get the count from the json
                                count = obj.d.results.length;
     
                                return {
                                    items: results, // The array of items
                                    offset: requestIndex - fetchIndex, // The offset into the array for the requested item
                                    totalCount: Math.min(count, that._maxCount), // Total count of records, bing will only return 1000 so we cap the value
                                };
                            } else {
                                return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
                            }
                        },
     
     
    Also modify doSearch in scenario1.js so you don’t need to type the key in the UI:
     
        function doSearch() {
            var devkey = document.getElementById("devkey").value;
            //if (devkey !== "" && devkey.length > 12) {
                var searchTerm = document.getElementById("query").value;
     
                var listview = document.getElementById("listview1").winControl;
                var myTemplate = document.getElementById("itemTemplate");
     
                //Create the bing itemDataSource
                var myDataSrc = new bingImageSearchDataSource(devkey, searchTerm);
     
                // Set the properties on the list view to use the itemDataSource
                listview.itemDataSource = myDataSrc;
                listview.itemTemplate = myTemplate;
            //}
        }
     
     
    Now it will work.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 4, 2012 1:49 PM
    Moderator

All replies

  • Hi,

    That sample was built against an earlier version of Bing Search API. Please upgrade it to the Windows Azure Marketplace version.
     
    First, you can obtain a key from Marketplace: https://datamarket.azure.com/account/info
     
    Then use any base64 tool to encode the key. Note while the key seems to be already base64 encoded, please encode it again.
     
    Then change the code:
     
    Modify getCount in BingImageSearchDataSource.js:
     
                // Called to get a count of the items
                // The value of the count can be updated later in the response to itemsFromIndex
                getCount: function () {
                    var that = this;
     
                    // Build up a URL to request 1 item so we can get the count
                    var requestStr = "https://api.datamarket.azure.com/Bing/Search/Image?";
                    requestStr += "Query='" + that._query + "'";
                    requestStr += "&$format=json";
     
                    //Return the promise from making an XMLHttpRequest to the server
                    return WinJS.xhr({ url: requestStr, headers: { "Authorization": "Basic YourEncodedKey" } }).then(
     
                        //Callback for success
                        function (request) {
                            var data = JSON.parse(request.responseText);
     
                            //Bing may return a large count of items, but it can only be fetched the first 1000, so we max the count at that.
                            try {
                                return data.d.results.length;
                            } catch (err) {
                                return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.noResponse));
                            }
                        },
                        function (request) {
                            return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.noResponse));
                        });
                },
     
     
    Modify the xhr part of the itemsFromIndex method:
     
                    //Build up the URL for the request
                    var requestStr = "https://api.datamarket.azure.com/Bing/Search/Image?";
                    requestStr += "Query='" + that._query + "'";
                    requestStr += "&$format=json";
     
                    //Return the promise from making an XMLHttpRequest to the server
                    return WinJS.xhr({ url: requestStr, headers: { "Authorization": "Basic YourEncodedKey" } }).then(
     
                        //Callback for success
                        function (request) {
                            var results = [], count;
     
                            // Use the JSON parser on the results, safer than eval
                            var obj = JSON.parse(request.responseText);
     
                            // Verify if the service has returned images
                            if (obj.d !== undefined) {
                                var items = obj.d.results;
     
                                // Data adapter results needs an array of items of the shape:
                                // items =[{ key: key1, data : { field1: value, field2: value, ... }}, { key: key2, data : {...}}, ...];
                                // Form the array of results objects
                                for (var i = 0, itemsLength = items.length; i < itemsLength; i++) {
                                    var dataItem = items[i];
                                    results.push({
                                        key: (fetchIndex + i).toString(),
                                        data: {
                                            title: dataItem.Title,
                                            thumbnail: dataItem.Thumbnail.MediaUrl,
                                            width: dataItem.Width,
                                            height: dataItem.Height,
                                            linkurl: dataItem.MediaUrl
                                        }
                                    });
                                }
                                // Get the count from the json
                                count = obj.d.results.length;
     
                                return {
                                    items: results, // The array of items
                                    offset: requestIndex - fetchIndex, // The offset into the array for the requested item
                                    totalCount: Math.min(count, that._maxCount), // Total count of records, bing will only return 1000 so we cap the value
                                };
                            } else {
                                return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
                            }
                        },
     
     
    Also modify doSearch in scenario1.js so you don’t need to type the key in the UI:
     
        function doSearch() {
            var devkey = document.getElementById("devkey").value;
            //if (devkey !== "" && devkey.length > 12) {
                var searchTerm = document.getElementById("query").value;
     
                var listview = document.getElementById("listview1").winControl;
                var myTemplate = document.getElementById("itemTemplate");
     
                //Create the bing itemDataSource
                var myDataSrc = new bingImageSearchDataSource(devkey, searchTerm);
     
                // Set the properties on the list view to use the itemDataSource
                listview.itemDataSource = myDataSrc;
                listview.itemTemplate = myTemplate;
            //}
        }
     
     
    Now it will work.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 4, 2012 1:49 PM
    Moderator
  • Hi,

    I will mark the reply as an answer. If you find it no help, please feel free to unmark it and follow up.

    Thanks.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, July 11, 2012 8:11 AM
    Moderator