locked
how to fetch data from local storage??

    Question

  • I had stored server data in localstorage dynamically.how can i fetch data row by row.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>testODataJS</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <!-- testODataJS references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/datajs-1.1.0.min.js"></script>

        <script type="text/javascript">
            var strUsername = "testuser";
            var strPassword = "initpass";
            var oHeaders = {};
            oHeaders['Authorization'] = "Basic " + btoa(strUsername + ":" + strPassword);
            var sUrl;

            function fetchVisits() {
                sUrl = "http://130.175.63.164:8000/sap/opu/odata/sap/Z_RETAIL_VISITLIST_CM/visitsCollection";


                var request = {
                    headers: oHeaders, // object that contains HTTP headers as name value pairs 
                    requestUri: sUrl, // OData endpoint URI 
                    method: "GET"

                };

                OData.read(request, function (data, response) {
                    var html = "<table>"
                    + "</td><td>Name</td><td>Credit</td><td></td><td></td><td></td><td></td><td></td><td>Customer</td></tr>";
                    for (var i = 0; i < data.results.length; i++) {
                        html += "</td><td>" + data.results[i].name + "</td><td>" + data.results[i].credit + "</td><td>" + data.results[i].dept + "</td><td>" + "</td><td>" + "</td><td>" + "</td><td>" + "</td><td>" + data.results[i].customer + "</td></tr>";


                    }
    html="</table>";
    document.getElementById("divid").innerHTML=html;
    var mystring;
                        mystring += "<table>"
                         + "<tr><td>Namesd</td><td>Credit</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Customer</td></tr>";
                        " { "
                        for (var i = 0; i < data.results.length; i++) {
                            mystring = mystring + "<table>" + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + data.results[i].name + "</td><td>" + data.results[i].credit + "</td><td>" + +data.results[i].customer + "</td></td>"
                            //var testObject = { 'one': data.results[i].name, 'two': data.results[i].cost, 'three': data.results[i].customer };
                            //WinJS.Namespace.define("ClickedData", { login: { Title: selectedItem.title, text: selectedItem.text, cost: selectedItem.cost, Details: selectedItem.Details } });
                            //WinJS.Binding.processAll(document.getElementById("mediumListIconTextTemplate"), testObject);
                            //var bindingSource = WinJS.Binding.as(testObject);
                        }
                        mystring = "</table>";
                        mystring = mystring.substring(1, mystring.length - 100);

                        mystring = mystring + "}";
                        mystring += "<hr>";
                        var testObject = mystring;
                        var a = testObject1.length;
                        console.log(a);
                        localStorage.setItem('testObject', JSON.stringify(testObject));
                        
                      
                       
                        var htm = localStorage.getItem('testObject');
                         document.getElementById("divid2").innerHTML=htm;
                  
                    
                    
                   
                },
                      function (err) {
                          // handle error reading the data 
                          document.getElementById("response").innerHTML = "<h3>" + err.message + "::  <strong>" + err.response.statusCode + ": " + err.response.statusText + "</strong></h3><br />" + err.response.body; //"<h3>Error fetcing Visits data</h3>";
                      });
            }



            (function () {
                "use strict";
                fetchVisits();
            })();


        </script>
    </head>
    <body style="; height: 181.5px; left: 0px; top: 0px;">
        <p>Content goes here</p>
       <div id="divid" data-win-control="WinJS.UI.ListView" style="overflow-x: auto; overflow: auto; ; right: 302.16px; left: 10.5px; top: 388.82px; height: 640.3px; background-color: #28421D;"  ></div>
        <div id="divid2"></div>
    </body>
    </html>

     
    Wednesday, March 20, 2013 5:40 AM

Answers

  • I think you need to rethink how you are approaching your problem here. 

    At the moment you:

    get some data->pump it into a string contain the html that you would like to store it-> serialize it (stringify)->store it-> try to retrieve it

    When you should do something like:

    get some data->serialize it->store it->output it->access it again when ever you like

    OData.read(request, function (data, response) {
      //store data as a string that can be turned into an object, and thus can be iterated etc
      localStorage.setItem("data", JSON.stringify(data.results));
    
      // Now you can do what ever you need, output the data now if u like
      for (i=0; i<data.results.length; i++) {
        var outputString = "<table>...";
        ...
      }
    });
    
    // and now you can access the data when ever you like by doing:
    
    var myStoredObject = JSON.parse(localStorage.getItem("data"));
    
    // can iterate over just like you did with data when it was read
    
    for (i=0; i<myStoredObject.length; i++) {
        var outputString = "<table>...";
        ...
      }




    Friday, March 22, 2013 7:26 AM

All replies

  • Looking at the above code it seems you want to convert the returned information (that you populate in mystring) into a JSON object? There appears to be a problem in your storing logic, you first create a table structure in the for loop by creating & appending the 'mystring' object and then when you come out of the for loop you lose the mystring object because you are reassigning the mystring object like this.

    Please post the correct code or some hardcoded values in your post so that we can assist you better.

    Wednesday, March 20, 2013 8:51 PM
    Moderator
  • hi prashant,

                    Thanks for your reply.In my code I want to fetch the returned data by row by row.could plz post the cose to achieve that task...thanks in advance

    Thursday, March 21, 2013 4:49 AM
  • I think you need to rethink how you are approaching your problem here. 

    At the moment you:

    get some data->pump it into a string contain the html that you would like to store it-> serialize it (stringify)->store it-> try to retrieve it

    When you should do something like:

    get some data->serialize it->store it->output it->access it again when ever you like

    OData.read(request, function (data, response) {
      //store data as a string that can be turned into an object, and thus can be iterated etc
      localStorage.setItem("data", JSON.stringify(data.results));
    
      // Now you can do what ever you need, output the data now if u like
      for (i=0; i<data.results.length; i++) {
        var outputString = "<table>...";
        ...
      }
    });
    
    // and now you can access the data when ever you like by doing:
    
    var myStoredObject = JSON.parse(localStorage.getItem("data"));
    
    // can iterate over just like you did with data when it was read
    
    for (i=0; i<myStoredObject.length; i++) {
        var outputString = "<table>...";
        ...
      }




    Friday, March 22, 2013 7:26 AM