I am looking for a way to transform JSON into a table automatically in the chorme

Question

My university has a really crappy website, so I set up some schematics to be notified on Discord (using a plugin called Distill and a webhook) every time there’s a change in a note. However, the addresses I keep updating to check for changes show a JSON text. And the Discord webhook does not accept for some reason.

So what I need is something to turn it:

{
"Notas" : [
     {
        "id": 95825,
        "tipo": "PROVA",
        "nome": "P1"
                                        ,"valor": "9.3"
                                }
    ,     {
        "id": 95826,
        "tipo": "PROVA",
        "nome": "P2"
                                            }
    ,     {
        "id": 95827,
        "tipo": "TRABALHO",
        "nome": "T"
                                            }
    ,     {
        "id": 95821,
        "tipo": "PROVA SUBSTITUTIVA",
        "nome": "PS"
                                            }
            ],
    "MediaParcial":"1.9",
            "LimiteInferiorExame":"4.0",
"LimiteSuperiorExame":"6.0",
"MediaAprovacao":"6.0",
"Formula":"(P1*2 + P2*2 + T*6)/10",
"Quantidade":4
}

In something like this:

This table was made using this: http://convertjson.com/json-to-html-table.htm or this http://json2table.com

I looked for some script for Tampermonkey... until I found some things that made the JSON more beautiful, but nothing like a table.

In case someone can give me some idea I graduate a lot because then I will be able to receive the grades by Discord instead of just a warning as I have done

Answer 1

I don’t know if this is really what you want, but just make a loop of repetition in the Object. I used jquery for this. And still bootstrap table to style the table.

HTML:

<table class="table table-striped">
  <tr>
    <th>ID:</th>
    <th>TIPO:</th>
    <th>NOME:</th>
  </tr>
</table>

JS:

var table = [
    {
        "id": 95825,
        "tipo": "PROVA",
        "nome": "P1"
    }
    ,     
    {
        "id": 95826,
        "tipo": "PROVA",
        "nome": "P2"
    }
    ,     
    {
        "id": 95827,
        "tipo": "TRABALHO",
        "nome": "T"
    }
    ,
    {
        "id": 95821,
        "tipo": "PROVA SUBSTITUTIVA",
        "nome": "PS"
    }
];

$.each(table, function(i, obj) {
    var tr = $('<tr></tr>');

    $.each(obj, function(key, result) {
    var td = $('<td></td>');
    td.text(result);
    tr.append(td);
  });
  $('table').append(tr);

});

Link JS FIDDLE