JSON html string to a new page

Question

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:

<p class="MsoNoSpacing" 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 class="MsoNoSpacing" 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"> </span></p><p class="MsoNoSpacing" 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 class="MsoNoSpacing" 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"> </span></p>

this works but I would like to put a button (button @click) and open it in a new tab : <div id="article" v-html="item.details_en" target="blank">Explore More</div> — Balazs Kelemen
– Balazs Kelemen, Commented Oct 31, 2021 at 16:47

Nikola Pavicevic · Accepted Answer · 2021-10-31 13:45:39Z

1

Try with v-html directive:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [{details_en:'<p class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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 class="MsoNoSpacing" 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>

answered Oct 31, 2021 at 13:45

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Balazs Kelemen Over a year ago

do you happen to know how to open that html link in a new tab? I tried like this: in the template: <div id="article" ><button @click="openArticle(v-html="item.details_en")">Explore More</button></div> and created a method in the script like this: openArticle(){ window.open()

Nikola Pavicevic Over a year ago

Hey mate, for new tab you need to use target="_blank" on a tag, take a look here

Balazs Kelemen Over a year ago

thanks, I got that one but the issue is that I am not using a proper link but pointing to v-html="item.details_en

Balazs Kelemen Over a year ago

this works but I would like to put a button (button @click) and open it in a new tab : <div id="article" v-html="item.details_en" target="blank">Explore More</div> –

Nikola Pavicevic Over a year ago

Ahh ok, what do you want to achieve? You want to display data from json in other tab?

|

Collectives™ on Stack Overflow

JSON html string to a new page

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related