fiz um codigo no java script para gerar um menu com as linguagens e em cada item do menu que eu clicar aparace um card com o nome de cada biblioteca e sua descriçao. fiz esse codigo mas o item nao gerou o card. alguem pode me ajudar nesse problema?
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var dados = [
{ "nomeLinguagem" : "Java", "bibliotecas" : [{"nomeBiblioteca" : "Hibernate","descricao" : "O Hibernate é um framework de estreita ligação com o JDBC, pois foi criado com o intuito de facilitar a persistência de dados em Java. Aqui entenderemos melhor essa ligação, bem como seu vínculo com a especificação JPA."}, {"nomeBiblioteca" : "RestEasy", "descricao" : "ESTEasy é um projeto do JBoss que fornece várias estruturas para ajudá-lo a construir serviços RESTful Web Services e RESTful Java. É uma implementação totalmente certificada e portátil da especificação JAX-RS 2.1 , uma especificação JCP que fornece uma API Java para serviços da Web RESTful sobre o protocolo HTTP."}, {"nomeBiblioteca" : "JPA", "descricao": "JPA é um framework leve, baseado em POJOS (Plain Old Java Objects) para persistir objetos Java. A Java Persistence API, diferente do que muitos imaginam, não é apenas um framework para Mapeamento Objeto-Relacional (ORM - Object-Relational Mapping), ela também oferece diversas funcionalidades essenciais em qualquer aplicação corporativa."} ] },
{ "nomeLinguagem" : "PHP", "bibliotecas" : [{"nomeBiblioteca" : "WordPress","descricao" : "WordPress é um sistema livre e aberto de gestão de conteúdo para internet (do inglês: Content Management System - CMS), baseado em PHP com banco de dados MySQL,[3] executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas (sites) e blogs online"}, {"nomeBiblioteca" : "PHP-DAO","descricao" : "Objeto de acesso a dados (acrônimo do inglês Data Access Object - DAO), é um padrão para aplicações que utilizam persistência de dados, onde tem a separaração das regras de negócio das regras de acesso a banco de dados, implementada com linguagens de programação orientadas a objetos (como por exemplo Java) e arquitetura MVC, onde todas as funcionalidades de bancos de dados, tais como obter conexões, mapear objetos para tipos de dados SQL ou executar comandos SQL, devem ser feitas por classes DAO."}] },
{ "nomeLinguagem" : "JavaScript", "bibliotecas" : [{"nomeBiblioteca" : "Vue.js","descricao" : "Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para a construção de interfaces de usuário."}, {"nomeBiblioteca" : "Angular.js","descricao" : "O AngularJS é um framework open-source de desenvolvimento front-end que possibilita o desenvolvimento de aplicações web, com foco em simplificar tanto a codificação quanto o processo de teste. "}, {"nomeBiblioteca" : "React.js","descricao" : "React é uma ferramenta somente para criar componentes. Criada pela equipe do Instagram (isso mesmo, antes do Facebook comprar) entrou para o “guarda chuva” de projetos open-source do Facebook, impulsionando mais ainda sua adoção"}] },
];
/**
*
*/
$(document).ready(function () {
// TODO Deve retornar uma string que é o HTML a ser inserido
var llen = dados.length;
$("body").append('<div class="collection"></div>');
for (var i = 0; i< llen;i++){
nomeLinguagem = dados[i].nomeLinguagem;
$(".collection").append('<a href="#!" class="collection-item" onclick="criaCardEmHtml(nomeBiblioteca,descricao)">'+ nomeLinguagem +'</a>');
}
});
function criaCardEmHtml(nomeBiblioteca, descricao) {
// TODO Deve retornar uma string que é o HTML a ser inserido
var llen = dados.length;
for (var i=0; i < llen; i++){
if (dados[i].nomeLinguagem == nomeLinguagem){
var blen = dados[i].bibliotecas.length
for(var j=0; j < blen; j++){
$("body").append('<div class="row"></div>');
$(".row").append('<div class="col s12 m6"></div>');
$(".col s12 m6").append('<div class="card blue-grey darken-1"></div>');
$(".card blue-grey darken-1").append('<div class="card-content white-text"></div>');
$(".card-content white-text").append('<span class="card-title">'+dados[i].bibliotecas[j].nomeBiblioteca+'</span><p>'+dados[i].bibliotecas[j].descricao+'</p>');
}
}
}
}
</script>