Challenge create menu with ajax() request

Question

json product.json file

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

test file.js

$(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 of no project is just a challenge.

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

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

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

What I want is to make each category stand on each tag <a href="[categoria aqui]"> within href. Someone there who can get that result?

Answer 1

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

Just insert into the for of .each() one if making the comparison (explanations in the code).

You don’t even need to concatenate, so the variable var n = ''; 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");
   })
})

Upshot:

<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>

Answer 2

Why don’t you ride the html you wish already in the callback of ajax ? example (untested)

$.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");
    })