Javascript json2html-创建HTML表

我试图找到好的JS插件，它将帮助我生成HTML

结构，并用JSON数据填充它

我发现了，但不幸的是，我在插件的官方网站上没有看到任何有用的示例或文档，也没有任何第三方网站可以查看

我创建了一个

函数（）。将JSON模板存储在变量中，我将用于json2html，并创建了一个
，其ID将用于使用此插件解析JSON生成的数据

// Demo function to generate random content
// ->
function generateChartData() {
 for (var i = 0; i < 5; i++) {
    var file_id = Math.floor(Math.random() * 90000) + 10000,
        file_name = 'Dummy File ' + Math.floor(Math.random() * 20) + 30 + '.zip',
        file_clicks = Math.round(Math.random() * 480) + 820,
        file_downloads = Math.round(Math.random() * 160) + 420,
        file_conversion = (file_clicks / file_downloads).toFixed(2),
        file_profit = Math.round(Math.random() * 120) + 310,
        file_cpa = (file_profit / file_downloads).toFixed(2),
        file_epc = (file_profit / file_clicks).toFixed(2);

    chartData.push({
      file_id: file_id,
      file_name: file_name,
      file_clicks: file_clicks,
      file_downloads: file_downloads,
      file_conversion: file_conversion,
      file_cpa: file_cpa,
      file_epc: file_epc,
      file_profit: file_profit
    });
  }

  // create variables but no values
  var total_clicks, total_downloads, total_conversion, total_profit, total_cpa, total_epc;
}
// <-

// Create html template for further json parsing
var template = {
  "tag": "table",
  "class": "table table-striped table-hover",
  "children": [
    {
      "tag": "thead",
      "id": "json-head",
      "children": [
        {
          "tag": "tr",
          "children": [
            {
              "tag": "th",
              "html": "ID"
            },
            {
              "tag": "th",
              "html": "File Name"
            },
            {
              "tag": "th",
              "html": "Clicks"
            },
            {
              "tag": "th",
              "html": "Downloads"
            },
            {
              "tag": "th",
              "html": "Conversion"
            },
            {
              "tag": "th",
              "html": "Average CPA"
            },
            {
              "tag": "th",
              "html": "EPC"
            },
            {
              "tag": "th",
              "html": "Profit"
            }
          ]
        }
      ]
    },
    {
      "tag": "tbody",
      "id": "json-body",
      "children": [
        {
          "tag": "tr",
          "children": [
            {
              "tag": "td",
              "html": "${file_id}"
            },
            {
              "tag": "td",
              "html": "${file_name}"
            },
            {
              "tag": "td",
              "html": "${file_clicks}"
            },
            {
              "tag": "td",
              "html": "${file_downloads}"
            },
            {
              "tag": "td",
              "html": "${file_conversion}"
            },
            {
              "tag": "td",
              "html": "${file_cpa}"
            },
            {
              "tag": "td",
              "html": "${file_epc}"
            },
            {
              "tag": "td",
              "html": "${file_profit}"
            }
          ]
        }
      ]
    },
    {
      "tag": "tfoot",
      "id": "json-foot",
      "children": [
        {
          "tag": "tr",
          "children": [
            {
              "tag": "td",
              "colspan": "2",
              "html": "Total / Average"
            },
            {
              "tag": "td",
              "html": "${total_clicks}"
            },
            {
              "tag": "td",
              "html": "${total_downloads}"
            },
            {
              "tag": "td",
              "html": "${total_conversion}"
            },
            {
              "tag": "td",
              "html": "${total_cpa}"
            },
            {
              "tag": "td",
              "html": "${total_epc}"
            },
            {
              "tag": "td",
              "html": "${total_profit}"
            }
          ]
        }
      ]
    }
  ]
};

// Empty array for json data
var chartData = [];

// Calling DEMO function to generate json data
generateChartData();

// Parse json data and generate html
$("#json-parse").json2html(chartData, template);

//生成随机内容的演示函数
// ->
函数generateChartData（）{
对于（变量i=0；i<5；i++）{
var file_id=Math.floor（Math.random（）*90000）+10000，
file_name='Dummy file'+Math.floor（Math.random（）*20）+30+'.zip'，
file_clicks=Math.round（Math.random（）*480）+820，
file_downloads=Math.round（Math.random（）*160）+420，
文件转换=（文件点击/文件下载）。toFixed（2），
file_profit=Math.round（Math.random（）*120）+310，
file_cpa=（file_利润/file_下载）.toFixed（2），
文件\ epc=（文件\利润/文件\点击次数）.toFixed（2）；
chartData.push({
文件id：文件id，
文件名：文件名，
文件单击：文件单击，
文件下载：文件下载，
文件转换：文件转换，
档案注册会计师：档案注册会计师，
文件总承包：文件总承包，
档案利润：档案利润
});
}
//创建变量但不创建值
var总点击量、总下载量、总转换量、总利润、总注册会计师、总epc；
}
//json2Html正在循环中生成模板，循环中的计数器与json对象计数相等。所以你看到的结果并没有错。如果不想重复页眉和页脚，只需将它们用作对象数组的另一个模板。

更新：感谢@Volune的支持

我可以建议使用简单的模板解决方案，如下划线吗？请看，这个JSFIDLE下划线是我不想在这个项目中使用的，但是感谢您的提及。你的演示不是我需要的。我可以知道为什么-1@谁给了一个负号吗？我正要回答同样的问题。json2html似乎无法处理复杂的数据结构，多亏了这一点，我的帮助很大。不过，我必须以
“tag:”tr“，
作为模板的开头，因为您的模板创建了n个表，其中只有一行，而我想要一个表，其中有n行。
<table class="table table-striped table-hover">
<thead id="json-head">
    <tr>
        <th>ID</th>
        <th>File Name</th>
        <th>Clicks</th>
        <th>Downloads</th>
        <th>Conversion</th>
        <th>Average CPA</th>
        <th>EPC</th>
        <th>Profit</th>
    </tr>
</thead>

<tbody id="json-body">
    <tr>
        <td>${file_id}</td>
        <td>${file_name}</td>
        <td>${file_clicks}</td>
        <td>${file_downloads}</td>
        <td>${file_conversion}</td>
        <td>${file_cpa}</td>
        <td>${file_epc}</td>
        <td>${file_profit}</td>
    </tr>
</tbody>

<tfoot id="json-foot">
    <tr>
        <td colspan="2">Total / Average</td>
        <td>${total_clicks}</td>
        <td>${total_downloads}</td>
        <td>${total_conversion}</td>
        <td>${total_cpa}</td>
        <td>${total_epc}</td>
        <td>${total_profit}</td>
    </tr>
</tfoot>

// Create html template for further json parsing
        var headertemplate = {
            "tag": "thead",
              "id": "json-head",
              "children": [
                {
                  "tag": "tr",
                  "children": [
                    {
                      "tag": "th",
                      "html": "ID"
                    },
                    {
                      "tag": "th",
                      "html": "File Name"
                    },
                    {
                      "tag": "th",
                      "html": "Clicks"
                    },
                    {
                      "tag": "th",
                      "html": "Downloads"
                    },
                    {
                      "tag": "th",
                      "html": "Conversion"
                    },
                    {
                      "tag": "th",
                      "html": "Average CPA"
                    },
                    {
                      "tag": "th",
                      "html": "EPC"
                    },
                    {
                      "tag": "th",
                      "html": "Profit"
                    }
                  ]
                }
              ]
        }
        var footertemplate = { 
              "tag": "tfoot",
              "id": "json-foot",
              "children": [
                {
                  "tag": "tr",
                  "children": [
                    {
                      "tag": "td",
                      "colspan": "2",
                      "html": "Total / Average"
                    },
                    {
                      "tag": "td",
                      "html": "${total_clicks}"
                    },
                    {
                      "tag": "td",
                      "html": "${total_downloads}"
                    },
                    {
                      "tag": "td",
                      "html": "${total_conversion}"
                    },
                    {
                      "tag": "td",
                      "html": "${total_cpa}"
                    },
                    {
                      "tag": "td",
                      "html": "${total_epc}"
                    },
                    {
                      "tag": "td",
                      "html": "${total_profit}"
                    }
                  ]
                }
              ]
        }
        var template = {
          "tag": "table",
          "class": "table table-striped table-hover",
          "children": [ 
            {
              "tag": "tbody",
              "id": "json-body",
              "children": [
                {
                  "tag": "tr",
                  "children": [
                    {
                      "tag": "td",
                      "html": "${file_id}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_name}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_clicks}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_downloads}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_conversion}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_cpa}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_epc}"
                    },
                    {
                      "tag": "td",
                      "html": "${file_profit}"
                    }
                  ]
                }
              ]
            } 
          ]
        }; 

    // Empty array for json data
    var chartData = [];

    // Calling DEMO function to generate json data
    generateChartData(); 
    // Parse json data and generate html
    $("#json-parse").json2html(chartData[0], headertemplate);
    $("#json-parse").json2html(chartData, template);
    $("#json-parse").json2html(chartData[0], footertemplate); //use your total json object with one array inside, instead chartData[0];