使用 fetch() 使用 JavaScript 将所有现有 .JSON 文件加载到 HTML 页面中

Question

我有

/mysite/index.html

然后我有一个文件夹 /mysite/products/ ，其中包含如下 JSON 文件：

/mysite/products/1.json
/mysite/products/2.json
/mysite/products/3.json
   ...
/mysite/products/578.json

等等...

每个 JSON 文件如下所示：

[{"id":1,"name":"16' Tire Japan","stock":145}]

在我的 HTML 中，我有一个表格：

<table>
   <thead>
      <th>id</th>
      <th>name</th>
      <th>stock</th>
   </thead>
   <tbody id="products"></tbody>
</table>

然后我有一个文件

/mysite/script.html

与我的 HTML 连接。

如何使用 JavaScript 从我的

.JSON

中一一获取所有现有

/products folder into the table tbody (id=products)

文件？

现在我对所有产品都有一个 JSON 文件，并且我像这样使用 fetch() ：

fetch("products.json")
  .then(function(response) {
    return response.json();
    })
  .then(function(products){
    let placeholder = document.querySelector("#products");
    let out = "";
    for(let product of products){
        out += `<tr id='tr${product.id}'>
                <td class='id'>${product.id}</td>
                <td class='name'>${product.name}</td>
                <td class='stock'>${product.stock}</td>
            </tr>`;
    }
    placeholder.innerHTML = out;
  });

Answer 1

首先，您需要在某个地方存储有关所有“/mysite/products/*.json”文件的信息。

A.您可以将其硬编码到脚本中

var MAX=578;
var filePaths = [];
for (let i = 1; i <= 578; i++) {
 filePaths.push(`http://your.web.site/mysite/products/${i}.json`);
}

B. ..或者您可以远程下载。

var filePaths = fetch('http://your.web.site/mysite/products/index.json')
    .then((response) => response.json())

然后您可以下载所有文件： A、一一

var array_of_products = []
filePaths.forEach(item => {
fetch(item)
  .then(response => response.json())
  .then(data => {
    array_of_products = array_of_products.concat(data)
  })
});

B. ...或者您可以与 Promise.all(array_of_fetch) 同时执行此操作

然后您可以执行代码“let placeholder = ...”的部分来填充您的表格

请注意，许多浏览器只允许 6-12 个连接，下载 578 个文件可能需要相当长的时间。

祝你的项目好运=)