如何改进加载 JSON 文件的 JavaScript 代码以使其更加动态

How to improve this javascript code loading JSON files to be more dynamic

本文关键字：动态 代码 JavaScript 加载 何改进 JSON 文件      更新时间：2023-09-26

我正在构建一个包含html表格集合的网页。每个表的数据都存储了JSON文件，我编写了一个JQuery方法来加载数据并将其呈现为HTML。 目前，这看起来像

HTML
<!-- Load sample_triangles.json into the following table -->
<table class="table json-triangle" data-filename="data/sample_triangles.json"></table>
<!-- Load sample_triangles2.json into the following table -->
<table class="table json-triangle" data-filename="data/sample_triangles2.json"></table>

JQuery
function renderTriangle(tri){
    //Renders a single triangle object to HTML (assumed to be wrapped inside <table> </table>)
    ...
    return str_tbl;
};
$.getJSON('data/sample_triangles.json', function(data){
  $('table[data-filename="data/sample_triangles.json"]').html(renderTriangle(data['ActiveCustomers']));
});
$.getJSON('data/sample_triangles2.json', function(data){
  $('table[data-filename="data/sample_triangles2.json"]').html(renderTriangle(data['ActiveCustomers']));
});

如何更好地概括此代码，以便简单地创建一个具有 data-filename 属性的 <table> 元素将触发 JQuery 搜索具有给定文件名的 json 文件并尝试在表中呈现它？

我认为它会是这样的：

$("table").each(function(){
  var filename = $(this).data("filename");
  var this1 = $(this);
  $.getJSON(filename,function(data){
    this1.html(renderTriangle(data['ActiveCustomers']));
  });
});
相关文章：