如何使用 json 数据填充表答案

【问题标题】：how to populate a table with json data如何使用 json 数据填充表
【发布时间】：2020-05-31 17:13:28
【问题描述】：

我正在使用这个计算器，当用户选择其中一种类型时，应该会出现一个小表格，从表格中选择一种类型，该类型应该填充 json 数据但不起作用

这是我的代码

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文件数据的样子

[{"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%"}]

这个样子

这应该是什么样子

【问题讨论】：

在.forEach() 方法之外定义和初始化tbody。另外，把table.appendChild(tbody);放在外面；在方法之后。
已经什么都没做
append_json() 内部console.log( data ); 的输出是什么？
数组显示在控制台中，我试图只显示单独的，它可以正常工作，所以也许它来自我给它的有限空间
console.log( $('#gable').length ) 的输出是什么？

标签： javascript html jquery html-table

【解决方案1】：

下面的输出为零表示没有 ID 为 gable 的元素。

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

请确认表有这个id，否则添加id属性，即：

id="gable"

【讨论】：