How to format Json code in HTML?

Asked

Viewed 454 times

0

Good afternoon, you guys. I need some help. I’m using the API: JSON Wordpress API and it releases . content that returns the post’s HTML code. How to take this json that contains HTML code and return it as HTML code?

Ex content of json content:

<h2 style="text-align: center;">Estréia do Blog</h2> 
<p style="text-align: justify;">
    Olá galera, tudo bem? É com muito prazer que estreio o meu blog pessoal, onde pretendo compartilhar meus conhecimentos, notícias atuais, minhas opiniões sobre assuntos da tecnologia. Falar sobre programação, desenvolvimento, projetos e qualquer coisa sobre a área.
</p> 
<p style="text-align: justify;">
    Meu nome é Pedro Franco, sou atualmente desenvolvedor de sites em WordPress em uma agência de publicidade em Belo Horizonte &#8211; MG chamada M.Bottaro. Desenvolvendo sites desenfreadamente ( comumente de agências &#8216;rsrs&#8217; ), e procuro sempre buscar aprimorar com metodologias ágeis e padrões me agilizar cada vez mais e me manter dentro da tendência do desenvolvimento WEB. São muitos detalhes e tenho de estar sempre estudando e aprendendo cada vez mais. Porém, realizei projetos em outras linguagens, em outras tecnologias. Por exemplo, no curso técnico desenvolvia em Java Web, e meu TCC que se encontra no GitHub <strong><a href="https://github.com/pedr0369/ProjetoPizzariaEureka">Pizzaria Eureka</a> </strong>foi desenvolvido nesta tecnologia, falarei em posts futuros sobre esta experiência. Em um estágio que realizei no <a href="http://www.crea-mg.org.br">CREA-MG</a> desenvolvia em C# e diversos frameworks com toda uma metodologia fixa por trás, uma experiência que me agregou muito tanto profissionalmente quanto pessoalmente e também falarei desta experiência em postagens futuras.
</p> 
<h3 style="text-align: center;">OBJETIVO DO BLOG</h3> 
<p style="text-align: justify;">
    Meu pretexto com este BLOG, é de que além de mostrar meu portfólio, pretendo também, informalmente escrever artigos periodicamente sobre o contexto do qual descrevi acima. Farei o possível para manter o blog sempre atualizado e com postagens frequentes, e as postagens curtas e diretas, sem muita delonga.
</p> 
<p style="text-align: justify;">
    &#8216;Nessa área de tecnologia, guardar conhecimento apenas para si mesmo não é algo legal, e acaba atrasando apenas a si mesmo, tanto que aqueles que compartilham seus conhecimentos e ajudam dentro do possível a comunidade relacionada a sua área acabam agregando aos outros e a si próprio.&#8217;
</p> 
<p style="text-align: justify;">
    Portanto, sempre que possível encontro um tempo, para tentar dentro de minha realidade aprender sempre mais e ajudar com o pouco que sei a quem precisa.
</p> 
<p style="text-align: justify;">
    No mais, sejam bem vindos. E espero que posso agregar conhecimento a todos leitores.
</p>
  • You want to take this returned content and play in a div?

  • I want it not to read as a string but rather that the browser runs the code described by json.

  • So, you want to render the content on the page.

  • Not a page, but a json content.

1 answer

2


Assuming you are receiving the data in front-end via javascript you can enter so:

var jsonString = '<h2 style="text-align: center;">Estréia do Blog</h2> <p style="text-align: justify;">Olá galera, tudo bem? É com muito prazer que estreio o meu blog pessoal, onde pretendo compartilhar meus conhecimentos, notícias atuais, minhas opiniões sobre assuntos da tecnologia. Falar sobre programação, desenvolvimento, projetos e qualquer coisa sobre a área.</p> <p style="text-align: justify;">Meu nome é Pedro Franco, sou atualmente desenvolvedor de sites em WordPress em uma agência de publicidade em Belo Horizonte &#8211; MG chamada M.Bottaro. Desenvolvendo sites desenfreadamente ( comumente de agências &#8216;rsrs&#8217; ), e procuro sempre buscar aprimorar com metodologias ágeis e padrões me agilizar cada vez mais e me manter dentro da tendência do desenvolvimento WEB. São muitos detalhes e tenho de estar sempre estudando e aprendendo cada vez mais. Porém, realizei projetos em outras linguagens, em outras tecnologias. Por exemplo, no curso técnico desenvolvia em Java Web, e meu TCC que se encontra no GitHub <strong><a href="https://github.com/pedr0369/ProjetoPizzariaEureka">Pizzaria Eureka</a> </strong>foi desenvolvido nesta tecnologia, falarei em posts futuros sobre esta experiência. Em um estágio que realizei no <a href="http://www.crea-mg.org.br">CREA-MG</a> desenvolvia em C# e diversos frameworks com toda uma metodologia fixa por trás, uma experiência que me agregou muito tanto profissionalmente quanto pessoalmente e também falarei desta experiência em postagens futuras.</p> <h3 style="text-align: center;">OBJETIVO DO BLOG</h3> <p style="text-align: justify;">Meu pretexto com este BLOG, é de que além de mostrar meu portfólio, pretendo também, informalmente escrever artigos periodicamente sobre o contexto do qual descrevi acima. Farei o possível para manter o blog sempre atualizado e com postagens frequentes, e as postagens curtas e diretas, sem muita delonga.</p> <p style="text-align: justify;">&#8216;Nessa área de tecnologia, guardar conhecimento apenas para si mesmo não é algo legal, e acaba atrasando apenas a si mesmo, tanto que aqueles que compartilham seus conhecimentos e ajudam dentro do possível a comunidade relacionada a sua área acabam agregando aos outros e a si próprio.&#8217;</p> <p style="text-align: justify;">Portanto, sempre que possível encontro um tempo, para tentar dentro de minha realidade aprender sempre mais e ajudar com o pouco que sei a quem precisa.</p> <p style="text-align: justify;">No mais, sejam bem vindos. E espero que posso agregar conhecimento a todos leitores.</p>';
            
var texto = document.getElementById('texto');
texto.innerHTML = jsonString;
<div id="texto"></div>

Note that I am basing myself on the string you posted, which is not a valid JSON, then you can have varied results with this method. If you have any error edit the question we tried to fit.

  • Man, I just got to say thank you, I broke my head thinking about a thousand things even more complex maybe, and the answer was just that. Thank you.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.