Contents of a JSON in a table cell

Question

Contents of a JSON in a table cell

Navigation

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

2

How do I get the result of a json and play straight into a table from my td? Is the form of getJSON right?

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

My json is this:

            {
            "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 whole code is like this, but I have not yet succeeded.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="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>

Does anyone have any light?

javascript json table getjson

asked by anonymous 30.08.2016 / 22:41

4 answers

In an activity, first open method onCreate or class constructor? Get filename that has no extension using foreach (glob ())

score 2 · Answer 1

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

Fixed 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"
 }

score 1 · Answer 2

Check your browser's console when you open the page. If you encounter an error similar to "Cross origin requests are only supported for protocol schemes: http ..." is because you are trying to run your script without being on a server. On this link you will find several explanations of why you can not read a local file without using a protocol such as http.

I was able 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 can not use a server to resolve your issue, you must 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 .

score 0 · Answer 3

When requesting the data is done below

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

The best way is to scan this object called the date and go dynamically inserting it with jquery's append

//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><tableclass="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>

score 0 · Answer 4

0

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

05.09.2016 / 15:42