JSON doesn't deserialize (sometimes?) #4602

bamartin-ua · 2017-05-16T12:58:30Z

Live Demo

Since jsbin no longer seems to support saving, I'll just copy my example here

<!doctype html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>


  <dom-module id="my-element">
    
    <style>
      :host {
        display: block;
      }
    </style>
    
    <template>
      <iron-ajax id="aj"
        headers='{"foo":"bar [[prop]]"}'
      ></iron-ajax>
      [[type]]
    </template>

    <script>
    HTMLImports.whenReady(function() {
      class MyElement extends Polymer.Element {
        static get is() { return 'my-element'; }
        static get properties() {
          return {
            prop: {
              type: String
            },
            type: {
              type: String,
              computed: 'gettype_(prop)'
            }
          }
        }
        
        gettype_(prop){return typeof(this.$.aj.headers)}
        
      }
      customElements.define(MyElement.is, MyElement);
    });
      
    </script>
    
  </dom-module>

  <my-element prop="baz"></my-element>
  
</body>
</html>

Steps to Reproduce

Have an <iron-ajax> element
Assign JSON object to 'headers' property

see PolymerElements/iron-ajax#245

Expected Results

typeof(headers)==Object

Actual Results

typeof(headers)==String

Browsers Affected

[ x] Chrome
[ x] Safari Document public api #10

Versions

Polymer: 2.0-preview
webcomponents: v1.0.0

The text was updated successfully, but these errors were encountered:

sorvell · 2017-05-17T18:08:44Z

When a binding is included via [[..]] or {{...}} in an attribute value, this becomes a property binding unless you explicitly ask for an attribute binding by using $ after the attribute name. Deserialization only occurs when setting attributes so if you want to include a binding in a value that you want to deserialize, you need to attribute bind to it. So change the headersto

headers$='{"foo":"bar [[prop]]"}'

Here's an example: http://jsbin.com/qenile/edit?html,output

That said, this construction where a binding is included within json syntax is going to be inherently brittle and slow and we'd recommend just constructing and binding in the entire object to be set to headers. The reason is that any time prop changes, the value will have to be re-JSON.parse'd. In addition, any value of prop that does not parse correctly will generate a warning.

So something like this is better: http://jsbin.com/kufuli/edit?html,output

bamartin-ua · 2017-05-17T18:37:04Z

Polymer doesn't deserialize properties, only attributes? That's somewhat confusing from the documentation.

Configuring object and array properties

For object and array properties you can pass an object or array in JSON format:

<my-element book='{ "title": "Persuasion", "author": "Austen" }'></my-element>
Note that JSON requires double quotes, as shown above.

https://www.polymer-project.org/2.0/docs/devguide/properties#configuring-object-and-array-properties

However, I've confirmed that changing the headers='{"foo":"bar [[prop]]"}' to headers$='{"foo":"bar [[prop]]"}' (and importing iron-ajax... oops) does in fact deserialize as desired, so thanks!

sorvell closed this as completed May 17, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JSON doesn't deserialize (sometimes?) #4602

JSON doesn't deserialize (sometimes?) #4602

bamartin-ua commented May 16, 2017 •

edited

Loading

sorvell commented May 17, 2017

bamartin-ua commented May 17, 2017

JSON doesn't deserialize (sometimes?) #4602

JSON doesn't deserialize (sometimes?) #4602

Comments

bamartin-ua commented May 16, 2017 • edited Loading

Live Demo

Steps to Reproduce

Expected Results

Actual Results

Browsers Affected

Versions

sorvell commented May 17, 2017

bamartin-ua commented May 17, 2017

bamartin-ua commented May 16, 2017 •

edited

Loading