1

I have a JSON file in which some of the elements contain html code and try to load this into a Polymer element. However, Polymer renders the html as plain text. How do I get Polymer to render the html-code as html?

Example JSON array:

[
  {
    "id" = "nr1",
    "content" = "some text with <i>italic</it> parts"
  }, {
    "id" = "nr2",
    "content" = "some text with <span class="test">formatted</span> parts"
  } 
]

Polymer element:

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">

<dom-module id="load-epi">
    <style>
    </style>
    <template>
        <iron-ajax
          auto
          url="epigraphs.json"
          handle-as="json"
          last-response="{{epigraphs}}"></iron-ajax>

    <div class="test">
        <div class="selectedcontent">
        <p>{{selected.content}}</p>
        <p class="selectedid">{{selected.id}}</p>
        </div>
    </div>
</template>
    <script>
    Polymer({
        is: 'load-epi',
        properties: {
            epigraphs: {
              type: Array,
              notify: true,
              value: function(){return []}
            },
            selected:  {
              type: Array,
              computed: 'selectEpigraph(epigraphs)'
            } 

        },
        selectEpigraph: function(epigraphs) {
          var epi = Math.floor((Math.random() * epigraphs.length));
          return epigraphs[epi]
        }
    });
    </script>
</dom-module>
Vimala
  • 61
  • 4

0 Answers0