JSON html string to a new page-CodePudding

Good afternoon Folks,

I have a JSON file from an API where articles are stored in a long string formatted with HTML format, how can I open them on a new page? If I insert this into a file with an HTML extension then I got a nicely formatted webpage. The data comes as "items" property as a list and I try to get them linkable like this, where the articles are under details_en

      `https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`

 <div id="article">{{item.details_en}}</div>

the actual JSON string looks like this but much longer:

Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p> Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p>

CodePudding user response：

Try with v-html directive:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [{details_en:'<p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p>'}, {details_en:'<p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Kuwait City, Kuwait and Dubai, UAE – October 26, 2021<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">Zain Group, a leading mobile telecom innovator in seven markets across the Middle East and Africa, announces it has been presented with three awards at the prestigious SAMENA Council endorsed MEA Business Magazine Technology Achievement Awards 2021, in the categories of New Technology Leadership for 5G launches in Kuwait and Saudi Arabia; Innovation Collaborations and Partnerships for the launch of Zain Esports; and Ground-breaking Products and Services for the ground-breaking Fintech solution ‘Tamam’ in Saudi Arabia.<o:p></o:p></span></p><p  style="margin: 0cm 0cm 0.0001pt; font-size: 11pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); text-align: justify;"><span lang="EN-US">&nbsp;</span></p>'}]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(item, idx) in items" :key="idx" id="article" v-html="item.details_en"></div>
</div>