Rendering from JSON, escaping HTML tags.

[emmanualojam]

Pls how do I render content from JSON that contains HTML tags as HTML, pls permit my ignorance am new to meteor and I have been search this questions for days without an answer.

for example I want to display this as html not text in the table

<p><a href="https://jobs.lever.co/canva/3f8de580-e99b-4cb2-8d31-8f49d37d11d8/apply?lever-source=GithubJobs"&gt;https://jobs.lever.co/canva/3f8de580-e99b-4cb2-8d31-8f49d37d11d8/apply?lever-source=GithubJobs&lt;/a&gt;&lt;/p&gt;

as this

https://jobs.lever.co/canva/3f8de580-e99b-4cb2-8d31-8f49d37d11d8/apply?lever-source=GithubJobs

[aslagle]

You have to use Spacebars.SafeString for Blaze to render the html:

new Spacebars.SafeString("<p><a href="https://jobs.lever.co/canva/3f8de580-e99b-4cb2-8d31-8f49d37d11d8/apply?lever-source=GithubJobs"&gt;https://jobs.lever.co/canva/3f8de580-e99b-4cb2-8d31-8f49d37d11d8/apply?lever-source=GithubJobs&lt;/a&gt;&lt;/p>");

[emmanualojam]

Ok but the content are from an api, Pls take a look at this and see how I could use Spacebars.SafeString() here as I don't know how to use it

Template.joblistings.onCreated(function() {
  this.response = new ReactiveVar();
  Meteor.call("httpRequest", "https://jobs.github.com/positions.json", (error, result) => {
          const show = new Spacebars.SafeString(JSON.parse(result.content));
          let glow = JSON.parse(result.content);
          for (var i=0;i<show.length;i++){
            glow[i].company_logo = "<img src='"+glow[i].company_logo+"'/>";
          }
          this.response.set(show);
          console.log(glow);
  });
});

Template.joblistings.helpers({
  showjobs: function() {
    const instance = Template.instance();
    return instance.response.get();
  },
  settings: function () {
        return {
            showFilter: true,
            fields: ['created_at', 'company', 'title', 'type', 'how_to_apply']
        };
    }
});

[aslagle]

You would need to change the fields in your settings so that any of the fields that contain HTML call Spacebars.SafeString.

Something like:

fields: [
  'created_at',
  'company',
  { key: 'title', label: 'title', fn: function (value) { return new Spacebars.SafeString(value) }; },
  'type',
   { key: 'how_to_apply', label: 'how to apply', fn: function (value) { return new Spacebars.SafeString(value) }; },
]

[emmanualojam]

Problem solved thanks a lot really appreciate your time. It initially gave some errors but removing the semi-colons at the end of the function in field solved it