Table does not add last request

Asked

Viewed 42 times

4

Good morning guys,

I’ll get straight to the point... I have this Success from my json where validating the following function:

 for(i=0; data.length>i ;i++)
        {   
                let cliente = data[i].item;
                let totais = {};
                data[i].item.forEach(i => {

                if(! totais[i.projeto])
                {
                   totais[i.projeto] = '';
                }
                 totais[i.projeto] = i.cliente ;
                });

                Object.keys(totais).forEach(l =>{
                    let clientes = totais[l];
                    $('#tabela').append('<table class="table table-light" id="table'+data[i].projeto+'"><thead class = "thead-dark"><tr><th>'+clientes+'-'+data[i].projeto+'</th><th></th><th></th><th></th><th></th><th></th></thead>');
                });

            for(j = 0; j < cliente.length; j++)
            {   

                $('#table'+data[i].projeto).append('<tbody><tr><td>'+cliente[j].nome+'</td><td>'+cliente[j].desc+'</td><td>'+cliente[j].type+'</td><td>'+cliente[j].start+'-'+cliente[j].end+'</td><td>'+cliente[j].duration+'</td><td class="ml-auto text-right"><buttom class="btn btn-primary mr-2 botao" id="edit"><i class="fas fa-user-edit"></i></buttom><buttom class="btn btn-danger botao" id="remove"><i class="fas fa-user-times"></i></i></buttom></td></tbody></table>');
                console.log(cliente[j].nome)
            }

        }

However, the last option does not appear in the table, but in the console.log the result appears. As in the image below, someone could give me a north of what can be done? inserir a descrição da imagem aqui

The json is like this:

[{"projeto":"TimeSheet","item":[{"id":"8","nome":"TimeTrack","desc":"Cria\u00e7\u00e3o da time track","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"21\/08\/2019","duration":"120:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego, Anderson"},{"id":"10","nome":"Dashboard","desc":"Cria\u00e7\u00e3o da dashboard","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"21\/08\/2019","duration":"20:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego"},{"id":"11","nome":"Pacote","desc":"Cria\u00e7\u00e3o tela de pacote","info":"","type":"programa\u00e7\u00e3o","start":"19\/08\/2019","end":"22\/08\/2019","duration":"96:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego, Anderson, Marcelo"}]},{"projeto":"Software","item":[{"id":"14","nome":"Software Line","desc":"Cria\u00e7\u00e3o da tela do software","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"22\/08\/2019","duration":"120:00","cliente":"Carlos","projeto":"Software","usuarios":"Diego,"}]},{"projeto":"Aplicativo Mobile","item":[{"id":"13","nome":"Aplicativo Mobile","desc":"Cria\u00e7\u00e3o de um app","info":"","type":"programa\u00e7\u00e3o","start":"21\/08\/2019","end":"22\/08\/2019","duration":"24:00","cliente":"Marcelo","projeto":"Aplicativo Mobile","usuarios":"Diego, Anderson"}]}]
  • Maybe it’s the data.length>i, mude para data.length>=i` and see if it worked.

  • It doesn’t work, it stops going through my value and only goes through my key.

  • If you print the i, How many does it go? Of the first one is

  • It comes my json... normal, the point is that it just doesn’t print in the table of the Mantle, but its data comes quietly.

  • And go to number 2

  • Ask a JSON sample.

  • @Sam, I posted my json.

  • "Last option" that you refer would be a line below "Marcelo-Mobile App"?

  • @Sam that, that line!

Show 4 more comments

1 answer

1


Your problem is that the code data[i].projeto can come with spaces in case of Aplicativo Mobile, there is a space between the two words, and by assigning this to a id will invalidate table id this way: id="tableAplicativo Mobile". An id cannot contain spaces.

To resolve this, simply remove possible spaces with a replace:

data[i].projeto.replace(/\s/g, '')

Then in id you will do:

id="table'+data[i].projeto.replace(/\s/g, '')+'"

And in the for will:

$('#table'+data[i].projeto.replace(/\s/g, ''))

See how it looks:

const data = [{"projeto":"TimeSheet","item":[{"id":"8","nome":"TimeTrack","desc":"Cria\u00e7\u00e3o da time track","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"21\/08\/2019","duration":"120:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego, Anderson"},{"id":"10","nome":"Dashboard","desc":"Cria\u00e7\u00e3o da dashboard","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"21\/08\/2019","duration":"20:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego"},{"id":"11","nome":"Pacote","desc":"Cria\u00e7\u00e3o tela de pacote","info":"","type":"programa\u00e7\u00e3o","start":"19\/08\/2019","end":"22\/08\/2019","duration":"96:00","cliente":"Carlos","projeto":"TimeSheet","usuarios":"Diego, Anderson, Marcelo"}]},{"projeto":"Software","item":[{"id":"14","nome":"Software Line","desc":"Cria\u00e7\u00e3o da tela do software","info":"","type":"programa\u00e7\u00e3o","start":"16\/08\/2019","end":"22\/08\/2019","duration":"120:00","cliente":"Carlos","projeto":"Software","usuarios":"Diego,"}]},{"projeto":"Aplicativo Mobile","item":[{"id":"13","nome":"Aplicativo Mobile","desc":"Cria\u00e7\u00e3o de um app","info":"","type":"programa\u00e7\u00e3o","start":"21\/08\/2019","end":"22\/08\/2019","duration":"24:00","cliente":"Marcelo","projeto":"Aplicativo Mobile","usuarios":"Diego, Anderson"}]}]

for(i=0; data.length>i ;i++)
  {   
          let cliente = data[i].item;
          let totais = {};
          data[i].item.forEach(i => {

          if(! totais[i.projeto])
          {
             totais[i.projeto] = '';
          }
           totais[i.projeto] = i.cliente ;
          });

          Object.keys(totais).forEach(l =>{
              let clientes = totais[l];
              $('#tabela').append('<table class="table table-light" id="table'+data[i].projeto.replace(/\s/g, '')+'"><thead class = "thead-dark"><tr><th>'+clientes+'-'+data[i].projeto+'</th><th></th><th></th><th></th><th></th><th></th></thead>');
          });

      for(j = 0; j < cliente.length; j++)
      {   

          $('#table'+data[i].projeto.replace(/\s/g, '')).append('<tbody><tr><td>'+cliente[j].nome+'</td><td>'+cliente[j].desc+'</td><td>'+cliente[j].type+'</td><td>'+cliente[j].start+'-'+cliente[j].end+'</td><td>'+cliente[j].duration+'</td><td class="ml-auto text-right"><buttom class="btn btn-primary mr-2 botao" id="edit"><i class="fas fa-user-edit"></i></buttom><buttom class="btn btn-danger botao" id="remove"><i class="fas fa-user-times"></i></i></buttom></td></tbody></table>');
      }

  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div id="tabela"></div>

  • 1

    Ball show buddy! Valeuzão really did not pay attention to that detail! Again, Thank you!

Browser other questions tagged

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