Polymer 2.0 - Trying to local storage object

497 views
Skip to first unread message

Naga Sai A

unread,
Jul 5, 2017, 7:13:43 PM7/5/17
to Polymer
Hi

I am trying to use local storage JSON Object and bind to the polymer element but it is not working as expected


index.html:


<!DOCTYPE html>
<html>


  <head>
    <script src="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="my-app.html">
  </head>


  <body>
    <script>
      var temp = [
        {
          "name":"Name",
          "size":"40"
        },
        {
          "name":"Age",
          "size":"20"
        }
      ]
      localStorage.setItem("temp", temp);
    </script>
    <my-app name="localStorage.getItem('temp')"></my-app>
  </body>


</html>:


my-app.html

<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/iron-ajax/iron-ajax.html">
<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/polymer/polymer-element.html">


<dom-module id="my-app">
  <template>
      <label>[[objVal(name)]]</label>
      <input type="text">
     
      <template is="dom-repeat" items="[[objVal(name)]]">
        {{item}}
      </template>
  </template>
  <script>
 
 
 
    class XFoo extends Polymer.Element {
      static get is() { return 'my-app'; }
     
      static get properties() {
        return {
          name: String
        }
      }
     
      objVal(a){
        return eval(a)
      }
     
    }
    customElements.define(XFoo.is, XFoo);
 
  </script>
</dom-module>

Daniel Llewellyn

unread,
Jul 5, 2017, 8:09:00 PM7/5/17
to Naga Sai A, Polymer


On 6 July 2017 at 00:13, Naga Sai A <nagasa...@gmail.com> wrote:

      localStorage.setItem("temp", temp);

​You're saving to the name "temp" an array of objects (from the variable called temp - you confused matters by naming both the local storage and the variable you're assigning to local storage with the same name so it is unclear which is which when talking about it.

    <my-app name="localStorage.getItem('temp')"></my-app>

​Ignoring the fact that Polymer doesn't bind in this manner, you are attempting to bind the "temp" you saved above which is an array of objects into a property that requires a string.​

You probably want something more like (assuming your syntax for localStorage is correct - I haven't checked that part):

<script>
var saveMe = [
  { "name": "Name", "size": 40 },
  { "name": "Age", "size": 20 }
];
localStorage.setItem("saved", saveMe);
</script>

<dom-bind id="app">
  <my-app name="[[temp]]"></my-app>
</dom-bind>

<script>
  var app = document.getElementById("app");
  app.temp = localStorage.getItem("saved");
</script>


--

A different approach might be to use app-localstorage-document (https://www.webcomponents.org/element/PolymerElements/app-storage/elements/app-localstorage-document):

<dom-bind id="app">
  <app-localstorage-document key="saved" value="{{temp}}"></app-localstorage-document>
  <my-app name="[[_getAnItem(temp)]]"></my-app>
</dom-bind>

<script>
  var app = document.getElementById("app");

  // add _getAnItem() function to return something meaningful - you need a string, but the example you provided in temp holds an array.
  app._getAnItem = function(arr) {
    return arr[0].name;
  }

  // if temp isn't loaded already we'll populate with something default
  if (!Array.isArray(app.temp) || app.temp.length() === 0) {
    app.temp = [
      { "name": "Name", "size": 40 },
      { "name": "Age", "size": 20 }
    ];
  }
</script>

--
Daniel Llewellyn
Bowl Hat

Daniel Llewellyn

unread,
Jul 5, 2017, 8:14:25 PM7/5/17
to Naga Sai A, Polymer
On 6 July 2017 at 01:08, Daniel Llewellyn <dan...@bowlhat.net> wrote:
<dom-bind id="app">
  <my-app name="[[temp]]"></my-app>
</dom-bind>

<script>
  var app = document.getElementById("app");
  app.temp = localStorage.getItem("saved");
</script>

​Oops, I also bound the array directly to the string-requiring field in this first example. You probably want to use something like the _getAnItem function from the second example in the example above. (the function is below)​
 
  // add _getAnItem() function to return something meaningful - you need a string, but the example you provided in temp holds an array.
  app._getAnItem = function(arr) {
    return arr[0].name;
  }

Naga Sai A

unread,
Jul 8, 2017, 10:44:24 PM7/8/17
to Polymer, nagasa...@gmail.com
Thanks Daniel
Reply all
Reply to author
Forward
0 new messages