Converting HTML Entities from JSON to String

Question

I'm using polymer and I'm new to it (just started using it today) and I have some troubles displaying data coming from JSON like  , ’, &#8220 etc.

HTML

<news-card>        
    <h1>{{summary.title}}</h1>
    <img src="{{summary.thumbnail}}"></img>
    <span>{{summary.published}}</span>
    <p>{{summary.summary}}</p>
</news-card>

Ex. JSON:

{
 title: '&#8217; This is a title',
 thumbnail: 'test.jpg',
 published: 'October 15'
 summary: '&#8220; &nbsp; &nbsp;'
}

Ex. Output:

&#8217; This is a title
October 15
&#8220; &nbsp; &nbsp;

The entity in the title should end in a semi-colon: `’`. – Joop Eggen Oct 15 '14 at 15:43 — Joop Eggen, Oct 15 '14 at 15:43

score 1 · Accepted Answer · edited May 23 '17 at 12:20

I used custom filters to display the desired output.

HTML

<news-card>

    <h1>{{summary.title | encodeEntities}}</h1>
    <img src="{{summary.thumbnail}}"></img>
    <span>{{summary.published}}</span>

    <p>{{summary.summary | encodeEntities}}</p>
</news-card>

Script

Polymer('your-polymer-element-name', {
      encodeEntities: function(value) {
        var div = document.createElement('div');
        div.innerHTML = value;
        return div.innerHTML;
      }
  });

Sources:

Polymer - Expressions: Custom Filters

Stackoverflow - How to assign HTML entities in Polymer element definition?

Converting HTML Entities from JSON to String

1 Answers1

Linked