如何使用 json 数据填充表

Question

i'm working on this calculator and when the user select one of the type a little table should appear to select a type from tha table which should be filled with a json data but doesn't work

this my code

document.addEventListener("DOMContentLoaded", get_json_data, false);

function get_json_data() {
    var json_url = 'example.json';
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);
            append_json(data);
        }
    }
    xmlhttp.open("POST", json_url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();
}

function append_json(data) {
    var table = document.getElementById('gable');
    data.forEach(function(object) {
        var tbody = document.createElement('tbody');
        tbody.innerHTML =
            '<tr>' +
            '<td > <input type="radio" value ="' + object.RendementDuPanneau + '" name="choice" class="rad" /> </td>' +
            '<td>' + object.Fournisseur + '</td>' +
            '<td>' + object.Modele + '</td>' +
            '<td>' + object.PuissanceMaximale + '</td>' +
            '<td>' + object.RendementDuPanneau + '</td>' + '</tr>';
        table.appendChild(tbody);
    });
    var elements = document.getElementsByTagName('tr');
    for (var i = 0; i < elements.length; i++) {

        (elements)[i].addEventListener("click", function() {
            const rb = this.querySelector('input[name="choice"]');
            rb.checked = true;

            let selectedValue = rb.value;
            alert(selectedValue);
        });
    }
}

json file data look like

[{"Fournisseur":"Jinko Solar","Modèle":"JKM270PP-60","PuissanceMaximale":270,"RendementDuPanneau":"16,50%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM275PP-60","PuissanceMaximale":275,"RendementDuPanneau":"16,80%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM280PP-60","PuissanceMaximale":280,"RendementDuPanneau":"17,11%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM285PP-60","PuissanceMaximale":285,"RendementDuPanneau":"17,41%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM320PP-72","PuissanceMaximale":320,"RendementDuPanneau":"16,49%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM325PP-72","PuissanceMaximale":325,"RendementDuPanneau":"16,75%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM330PP-72","PuissanceMaximale":330,"RendementDuPanneau":"17,01%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM335PP-72","PuissanceMaximale":335,"RendementDuPanneau":"17,26%"}]

this how it looks

this how it should look like

Answer 1

An output of zero from the following indicates there's no element with id gable .

console.log( $('#gable').length );

Please confirm that the table has this id, otherwise add an id attribute, thus:

id="gable"