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:

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>

this works but I would like to put a button (button @click) and open it in a new tab :
Explore More — Balazs Kelemen, Oct 31 '21 at 16:47

score 1 · Accepted Answer · answered Oct 31 '21 at 13:45

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>

do you happen to know how to open that html link in a new tab? I tried like this: in the template:
and created a method in the script like this: openArticle(){ window.open() — Balazs Kelemen, Oct 31 '21 at 16:19
Hey mate, for new tab you need to use `target="_blank"` on `a` tag, take a look [here](https://stackoverflow.com/questions/40015037/can-vue-router-open-a-link-in-a-new-tab/49654382) — Nikola Pavicevic, Oct 31 '21 at 16:35
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, Oct 31 '21 at 16:41
this works but I would like to put a button (button @click) and open it in a new tab :
Explore More
– — Balazs Kelemen, Oct 31 '21 at 16:49
Ahh ok, what do you want to achieve? You want to display data from json in other tab? — Nikola Pavicevic, Oct 31 '21 at 16:50
so the data comes from an API as JSON, I created a data property as items and called a v-for on it, with your help the v-html opens nicely on the page the article but I would like to put a button that opens it in a new tab/window — Balazs Kelemen, Oct 31 '21 at 16:52
I think you need to create component then send data as props to that component and route to that component on another tab — Nikola Pavicevic, Oct 31 '21 at 17:07

JSON html string to a new page

1 Answers1