1

Como faço para pegar o resultado de um json e jogar direto dentro de um td da minha table? Está certa a forma do getJSON?

 <script type = "text/javascript" language = "javascript">
    $(document).ready(function(){
        $.getJSON('../js/gcs.json', function(data) {
                $('#inprog').append(data.inprog);
                $('#queued').append(data.queued);
                $('#total').append(data.total);
                $('#resolved').append(data.resolved);
        });
    });
</script>

O meu json é este:

            {
            "inprog" : "123",
            "queued" : "00",
            "total" : "103",
            "resolved" : "101",
            "20days" : "0",
            "8to20days" : "16",
            "5to7days" : "17",
            "1to4days" : "70",
            "csatess" : "80%",
            "csatcps" : "80%",
            "csatgcs" : "100%",
            "escalations" : "10"
            }

O meu HTML:

<table class="hovertable" border="1">
    <tr>
        <thead>
            <th colspan="6">DASHBOARD</th>
        </thead>
    </tr>
    <tbody>
        <tr>
            <td><b>INPROG > 50</b></td>
            <td id="inprog"></td>
            <td><b>> 20 days</b></td>
            <td>0</td>
            <td><b>CSAT ESS</b></td>
            <td>80%</td>
        </tr>
        <tr>
            <td><b>QUEUED = 00</b></td>
            <td>0</td>
            <td><b>8 to 20 days</b></td>
            <td>16</td>
            <td><b>CSAT CPS</b></td>
            <td>80%</td>
        </tr>
        <tr>
            <td><b>TOTAL < 50</b></td>
            <td>103</td>
            <td><b>5 to 7 days</b></td>
            <td>17</td>
            <td><b>CSAT GCS</b></td>
            <td>100%</td>
       </tr>
       <tr>
           <td><b>RESOLVED >70</b></td>
           <td>101</td>
           <td><b>1 to 4 days</b></td>
           <td>70</td>
           <td><b>ESCALATIONS</b></td>
           <td>10</td>
      </tr>
   </tbody>       
</table>

UPDATE:

Meu código todo está assim, mas ainda não tive sucesso.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
    $(document).ready(function(){
        $.getJSON('../js/gcs.json', function(data)  {
            var table = document.querySelector(".table tbody tr")
            //pegando a tabela  

            //inserindo dinamicamente o objeto dentro da tabela  
            for(t in data){
                //t posicao do objeto retorna 'inprog'
                //objeto[t] retornaria '123'
                $(table).append("<td>"+ t + "</td><td>" +data[t] + "<td>")
            }         
        });
    });
</script>

<table class="hovertable table" border="1">
    <tr>
        <thead>
            <th colspan="6">DASHBOARD</th>
        </thead>
    </tr>
    <tbody>

    </tbody>
</table> 
</html>

Alguém tem alguma luz?

2
  • Não funciona? Como é o teu HTML? já verificaste que data tem conteúdo?
    – Sergio
    30/08/2016 às 20:44
  • Não funciona. Na verdade não sei como chamar estes valores do json para dentro do td. eu tentei com algo desse tipo: <td id="inprog"></td> 30/08/2016 às 20:50

4 Respostas 4

1

Seu arquivo JSON está errado, pois não deve ter uma vírgula no final do último item.

Versão corrigida:

 {
    "inprog": "123",
    "queued": "00",
    "total": "103",
    "resolved": "101",
    "20days": "0",
    "8to20days": "16",
    "5to7days": "17",
    "1to4days": "70",
    "csatess": "80%",
    "csatcps": "80%",
    "csatgcs": "100%",
    "escalations": "10"
 }
2
  • Opa! Não tinha visto! 30/08/2016 às 20:48
  • Caso tenha resolvido o problema, não esquece de aceitar a resposta ok? 30/08/2016 às 20:59
1

Verifique o console do seu navegador quando abre a página. Se você encontrar um erro similar a "Cross origin requests are only supported for protocol schemes: http..." é porque você está tentando rodar esse seu script sem estar em um servidor. Nesse link você encontra várias explicações de porque não se pode ler um arquivo local sem usar um protocolo como http.

Eu consegui executar o seu código e funcionou perfeitamente. Usei o servidor que vem embutido no php. Bastou rodar o comando php -S localhost:8080 no diretório do projeto, acessar essa url pelo navegador e digitar o caminho até o arquivo. Você também pode usar qualquer outro servidor http de sua escolha que irá funcionar.

Edit: Caso você não possa usar um servidor para resolver o seu problema, terá que habilitar o seu navegador para permitir requisições XMLHttpRequest em arquivos locais. Eu sei que pro Chrome tem um plugin pra isso. Uma boa referência é esse tópico.

0

Quando a solicitação dos dados for realizada nesse ponto abaixo

$.getJSON('../js/gcs.json', function(data) {

a melhor forma é varrer esse objeto chamado de data e ir inserindo dinâmicamente com o append do jquery

//exemplo do objeto que retornou

data = {
  "inprog": "123",
  "queued": "00",
  "total": "105",
  "resolved": "101",
  "20days": "0",
  "8to20days": "16",
  "5to7days": "17",
  "1to4days": "70",
  "csatess": "80%",
  "csatcps": "80%",
  "csatgcs": "100%",
  "escalations": "10"
};
var table = document.querySelector(".table tbody tr")
   //pegando a tabela    
  
  //inserindo dinamicamente o objeto dentro da tabela 
for(t in data){
  //t posicao do objeto retorna 'inprog'
  //objeto[t] retornaria '123'
            $('#inprog').text(data.inprog);
                $('#queued').text(data.queued);
                $('#total').text(data.total);
                $('#resolved').text(data.resolved);
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="hovertable" border="1">
    <tr>
        <thead>
            <th colspan="6">DASHBOARD</th>
        </thead>
    </tr>
    <tbody>
        <tr>
            <td><b>INPROG > 50</b></td>
            <td id="inprog"></td>
            <td><b>> 20 days</b></td>
            <td>0</td>
            <td><b>CSAT ESS</b></td>
            <td>80%</td>
        </tr>
        <tr>
            <td><b>QUEUED = 00</b></td>
            <td id="queued">0</td>
            <td><b>8 to 20 days</b></td>
            <td>16</td>
            <td><b>CSAT CPS</b></td>
            <td>80%</td>
        </tr>
        <tr>
            <td><b>TOTAL < 50</b></td>
            <td id="total">103</td>
            <td><b>5 to 7 days</b></td>
            <td>17</td>
            <td><b>CSAT GCS</b></td>
            <td>100%</td>
       </tr>
       <tr>
           <td><b>RESOLVED >70</b></td>
           <td id="resolved"></td>
           <td><b>1 to 4 days</b></td>
           <td>70</td>
           <td><b>ESCALATIONS</b></td>
           <td>10</td>
      </tr>
   </tbody>       
</table>

3
  • E como eu faria para "desenhar" esta tabela? Aqui não estou conseguindo jogar o resultado do json na tela. 1/09/2016 às 18:44
  • Dá uma olhada aí @AlissonCunha , atualizei aqui. Vê se esse exemplo funciona 1/09/2016 às 22:00
  • Desenhou a tabela, mas não trouxe o resultado do json. :( 2/09/2016 às 20:36
0

Existe alguma outra forma de se copiar o valor de um elemento do json e jogar dentro de uma célula específica da minha tabela?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .