我想在 html 中加载一个 json 脚本（本地），用作表格

Posted 2023-05-08

【中文标题】我想在 html 中加载一个 json 脚本（本地），用作表格

【英文标题】：I want to load a json script (locally) in html, to use as a table

【发布时间】：2021-12-26 01:02:38

【问题描述】：

这是我想从外部调用的 json 文件，它位于我的 html 文件中，位于一个名为“api”的文件夹中，无法编辑，因为在实时环境中我无法编辑。

    "tests": [
        
            "test_id": "ffc22c5e-1743-49de-9fce-c15df8c15fcc",
            "url": "https://www.url1.com",
            "checkrate": 300,
            "alert_expiration": true,
            "alert_errors": true,
            "alert_mixed_content": true,
            "follow_redirects": true,
            "first_expiration_reminder": 30,
            "second_expiration_reminder": 7,
            "third_expiration_reminder": 1
        ,
        
            "test_id": "52744d25-9492-46b6-999d-af2fcdf87296",
            "url": "https://url1.com/",
            "checkrate": 86400,
            "alert_expiration": true,
            "alert_errors": false,
            "alert_mixed_content": true,
            "follow_redirects": true,
            "first_expiration_reminder": 30,
            "second_expiration_reminder": 7,
            "third_expiration_reminder": 1
        ,
        
            "test_id": "25f171b8-f248-4f63-8e89-ae4813149670",
            "url": "https://url3.com/",
            "checkrate": 600,
            "alert_expiration": false,
            "alert_errors": true,
            "alert_mixed_content": true,
            "follow_redirects": true
        
    ],
    "metadata": 
        "total_size": 3
    

这是我尝试过的 JS，但在加载 json 时不起作用，我在我的 HTML 页面顶部使用脚本标记。

var json = require('api/ssltests.json'); //(with path)
var ssltests = '';
      
         $.each(json, function(key, value)
           if(key === 0) 
            ssltests += "<div class=\"row\">";
               $.each(Object.keys(value), function(k, v) 
                ssltests += "<div class=\"cell\">" + v + "</div>";
               );
               ssltests += "</div>";
             
           
             ssltests += "<div class=\"row\">";
               $.each(Object.keys(value), function(k, v) 
                ssltests += "<div class=\"cell\">" + value[v] + "</div>";
               );
               ssltests += "</div>";
      
         );

【问题讨论】：

您必须设置本地服务器。我会推荐 npm 包http-server，它不需要设置。只需在根文件夹中运行npx http-server。

【参考方案1】：

您不能在客户端使用require。正如评论中已经提到的，它是 CommonJS 的一部分，可用于服务器端 javascript，通常在 NodeJS 的范围内。更多详情请查看this answer。

如果您想获取其他文件，您必须使用浏览器的fetch API 为您加载文件。正如另一条评论中提到的，要在本地进行测试，您必须生成一个网络服务器。

【参考方案2】：

使用相对路径 ./ 应该可以工作。

var json = require('./api/ssltests.json');

【讨论】：

require 是 CommonJS，在浏览器中不可用。