Home > database >  how to add <a> HTML tag in json array object
how to add <a> HTML tag in json array object

Time:10-13

I am new to creating array object , and I dont know how to add link in tag in json file

json object code:

powerUpList: [ 
  {
    id: 8,
    name: 'Automate your API column type ',
    description: 'Set automated schedules (daily, 3 days, weekly, biweekly, monthly) on your API column type and keep yourself up to date at all times. Note: Please check total limits based on your plan. ',
    category: 'Automation',
    status: 0,
  },
  {
    id: 9,
    name: 'Google Drive Sync ',
    description: 'Sync your stacks directly with your Google Drive Account and open/create stacks from Google Drive.',
    category: 'Apps',
    status: 0,
  },
  {
    id: 10,
    name: 'Google Chrome Extension',
    description: 'Clip information from any webpage, through a custom google chrome extension.<a href="https://chrome.google.com/webstore/detail/stackby-webclipper/kjkhpjfgbiedbaohfklagjmcdjhamoje" > Download it from here.</a>',
    category: 'Apps',
    status: 0,
  },
  {
    id: 11,
    name: 'Color Formatting on Rows',
    description: 'Add colors on rows based on pre-defined conditions. ',
    category: 'Data Transformation',
    status: 0,
  },
  {
    id: 12,
    name: 'Database Snapshots',
    description: 'Take a manual, point-in-time snapshot of your database and recover it at a later time. Note: Duration for snapshot history is based on the plans. ',
    category: 'Data Recovery',
    status: 1,
  },
],

powerUpCategoryList: [
  'Data Recovery',
  'Import',
  'Data Transformation',
  'Sharing',
  'Automation',
  'Apps',
],

this is my json file code

and this is actual code in .ejs where all instance perform , and the accordian does not close ,

powerup.ejs

<div class="col-md-9" id="root">
  <div role="tablist" id="accordion-1">
    <%for (var i = 0; i < powerUpList.length; i  ) { %>
      <div class="card">
        <div class="card-header" role="tab">
          <a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-<%= i 1 %>" href="div#accordion-1 .item-<%= i 1 %>"><%= powerUpList[i].name%></a>

          <%if (powerUpList[i].status == 0) { %>
              <a class="live-lable status-live" >
                Live 
              </a>
            <%}else if(powerUpList[i].status == 1){-%>
              <a class="live-lable status-comingsoon" >
                Coming soon 
              </a> 
            <%}else if(powerUpList[i].status == 2){-%>
              <a class="live-lable status-beta" >
                In-Beta 
              </a> 
            <%}-%>
        </div>
        <div class="collapse show item-<%= i 1 %>" role="tabpanel" data-parent="#accordion-1">
            <div class="card-body">
                <p class="card-text" ><%= powerUpList[i].description%></p>
            </div>
        </div>
      </div>
    <%}-%>
  </div>
</div>

here , I want to show in enter image description here

CodePudding user response:

Using ejs templating ,

you could output raw data (print html) using <%- your.rentry %> instead of <%= your.rentry %>

as you can see in documentation :

<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template

So your last description should be like :

<div class="card-body">
     <p class="card-text" ><%- powerUpList[i].description %></p>
</div>
  • Related