Challenge create menu with ajax request ()

Question

Challenge create menu with ajax request ()

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

File json producto.json

{
    "produto":[
        {"categoria": "#home", "nome": "home"},
        {"categoria": "#fotos", "nome": "fotos"},
        {"categoria": "#contato", "nome": "contato"},
        {"categoria": "#perfil", "nome": "perfil"},
        {"categoria": "#painel", "nome": "painel"}
    ]
}

test.js file

$(function(){
    var nome_a = ['home', 'fotos', 'contato', 'perfil', 'painel'];
    var n = '';

    var el = $('ul');
    for(var i = 0; i < nome_a.length; i ++){
        console.log('<li><a>'+nome_a[i]+'</a></li>');
        const y = '<li><a>'+nome_a[i]+'</a></li>';
        el.append(y);
    }
    //configura atribute href no elemento <a>
    $.ajax({
        url: 'produto.json',
        type: 'get',
        dataType: 'json'
    }).done(function(data){
        $('a').each(function(){
        for(var i = 0; i < data.produto.length; i++){
            //console.log(data.produto[i]);
           // n += event.type;
           n += data.produto[i]["categoria"];
        }
        $(this).attr('href', n);
    }) 
    }).fail(function(){
        console.log("Erro no carregamento das categorias");
    })
})

What I'm doing is not a project, it's just a challenge.

What I want is to get the product category and add as a link in the href of the <a> element by making ajax () request.

The first line of code in the test.js file is creating the <li><a> tags with the category names of var nome_a , and creating it with a for() loop.

The second part now is to get the categories with ajax () and add in the href attribute, but when I do this is to add all the categories in a single <a> tag. Result example: <a href="#home#fotos#contato...">home</a>

What I want is to make each category stay in every <a href="[categoria aqui]"> tag within href. Anyone there able to get this result?

javascript jquery ajax

asked by anonymous 07.08.2018 / 21:21

2 answers

0

Why do not you mount the html you already want in ? example (not tested)

$.ajax({
        url: 'produto.json',
        type: 'get',
        dataType: 'json'
    }).done(function(response){
        var data = $('ul');
        response.forEach(function(produto) {
            console.log(produto);
                data.append(
                     $("<li></li>").append(
                         $('<a></a>').attr('href', produto.categoria)
                    )
                );
            }

        });
    }) 
    }).fail(function(){
        console.log("Erro no carregamento das categorias");
    })

07.08.2018 / 22:42

Database Structure - Php and Mysql - Marketplace Images in the ListView reloading every time I select the fragment?

score 0 · Accepted Answer

If you check the value of nome in JSON and compare it with the text of the link, you can play the value of categoria in your link.

Just enter% with for .each() doing comparison (explanations in code).

You do not need to do concatenation, so the if variable is expendable:

$(function(){
   var nome_a = ['home', 'fotos', 'contato', 'perfil', 'painel'];
   //    var n = '';

   var el = $('ul');
   for(var i = 0; i < nome_a.length; i ++){
      //        console.log('<li><a>'+nome_a[i]+'</a></li>');
      const y = '<li><a>'+nome_a[i]+'</a></li>';
      el.append(y);
   }
   //configura atribute href no elemento <a>
   $.ajax({
      url: 'conecta.php',
      type: 'get',
      dataType: 'json'
   }).done(function(data){
      $('a').each(function(i, e){

         // pego o texto do link
         var nome = $(e).text();

         for(var i = 0; i < data.produto.length; i++){

            // verifico se a chave "nome" é igual ao texto do link
            if(data.produto[i].nome == nome){

               // se forem iguais, atribuo o "href" com o valor
               // da chave "categoria"
               $(e).attr('href', data.produto[i].categoria);
               break; // paro o laço, pois já encontrei o que queria
            }
         }
      }) 
   }).fail(function(){
      console.log("Erro no carregamento das categorias");
   })
})

Result:

<ul>
   <li>
      <a href="#home">home</a>
   </li>
   <li>
      <a href="#fotos">fotos</a>
   </li>
   <li>
      <a href="#contato">contato</a>
   </li>
   <li>
      <a href="#perfil">perfil</a>
   </li>
   <li>
      <a href="#painel">painel</a>
   </li>
</ul>