Contents of a JSON in a table cell

Asked

Viewed 1,194 times

2

How do I get the result of a json and play directly inside a td of my table? It’s right in the form of 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>

This is my json:

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

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

My code is all like this, but I haven’t had any success yet.

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

Someone has some light?

javascript json table getjson

  • Doesn’t it work? What’s your HTML like? Have you checked that data has content?

  • It doesn’t work. I don’t really know how to call these json values inside td. I tried something like this: <td id="inprog"></td>

4 answers

2

Your JSON file is wrong as it should not have a comma at the end of the last item.

Corrected version:

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

  • Oops! I haven’t seen!

  • If you have solved the problem, do not forget to accept the answer ok?

1

Check your browser console when you open the page. If you find an error similar to "Cross origin requests are only supported for Protocol schemes: http..." it is because you are trying to run this script without being on a server. At this link you find several explanations of why you cannot read a local file without using a protocol like http.

I managed to run your code and it worked perfectly. I used the server that comes embedded in php. Just run the command php -S localhost:8080 in the project directory, access this url through the browser and enter the path to the file. You can also use any other http server of your choice that will work.

Edit: If you cannot use a server to resolve your problem, you will need to enable your browser to allow Xmlhttprequest requests in local files. I know pro Chrome has a plugin for this. A good reference is this topic.

0

When the data request is performed at this point below

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

the best way is to scan this object called date and insert dynamically with the append 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>

  • And how would I "draw" this table? Here I am unable to play the result of json on the screen.

  • Take a look at @Alissoncunha , updated here. See if this example works

  • Drew the table, but did not bring the json result. :(

0

Is there any other way to copy the value of a json element and play within a specific cell of my table?

Browser other questions tagged javascript json table getjson

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