Busca estática em HTML + JSON API Wordpress

[victorbrites]

Estou criando uma página em HTML onde o conteúdo será dinâmico, para isso estou utilizando o plugin JSON API do Wordpress para puxar os dados que preciso.

O que eu estava tentando fazer é uma busca estática onde terá um input onde o usuário digita um termo e o script em seguida realiza uma busca da tag <h4> localizada no script abaixo. Tudo o que o usuário buscar no input será localizada na tag <h4> da div #listview.

Tentei utilizar algumas formas com o Angular, mas sem sucesso, realmente não estou conseguindo desenvolver essa busca.

Maneiras que tentei com Angular:
https://plnkr.co/edit/mCf34kH4X4lWPqFFcail?p=preview
https://plnkr.co/edit/F7e5ECYbl91mYhF3g848?p=preview

O código inicial que utilizo está abaixo, está puxando os posts do wordpress.

`

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wordpress</title>

<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	var url="http://app01.queroestagio.com/p001/api/get_recent_posts/";
	$.getJSON(url,function(result){
        $.each(result.posts, function(i, field){
        	var title=field.title;
           var date=field.date;
            var content=field.content;
            $("#listview").append("<li><h4>"+title+"<h4><p>"+date+"</p><p>"+content+"</p></li>");
        });
  	});
});
</script>

<ul id="listview">

</ul>

</body>

`

[rubenmarcus]

@victorbrites quando jogo a url no postman : http://app01.queroestagio.com/p001/api/get_recent_posts

aparece um html e não um arquivo json, qual plugin vc está usando o wordpress rest api ?

Mude o end-point para : http://app01.queroestagio.com/p001/wp-json/wp/v2/posts

talvez role!!!

[rubenmarcus]

nessa url que te passei tem outro problema, no seu código você está pegando .title ,mas não vai rolar pq ele tem uma hierarquia com um item abaixo ,rendered se liga:

"title": {
"rendered": "Exemplo 01"
},

[rubenmarcus]

e não sei se é uma besteira o que vou falar agora mas se o <title> </title> da sua página for um valor dinâmico, isso vai impactar em SEO, e talvez não seja a melhor forma de fazer dinamicamente pelo angular, talvez veja alguma tecnica de SSR (Server Side Rendering) para fazer..

[kvnol]

e não sei se é uma besteira o que vou falar agora mas se o <title> </title> da sua página for um valor dinâmico, isso vai impactar em SEO

Sim, tags <title> não podem se repetir entre as páginas. Devem ser únicos e descritivos ao conteúdo.

[rubenmarcus]

@kvnol opa , to ligado ,por isso alertei ele. Em 2015 , fiz meu portfolio em Angular, mas coloquei varios elementos importantes para SEO dinamicos, o title foi um deles.
https://github.com/rubenmarcus/old-portfolio/blob/master/index.html

O meu próximo to tentando fazer em VueJs com Nuxt..

pro amigo ai acho que é importante, se o app dele for "quero estágio" ele vai ter muita busca no google