I want to load a json script (locally) in html, to use as a table-CodePudding

This is the json file that I want to call in externally, its local to my html file in a folder called 'api' this can't be edited, as on the live environment I won't be able to.

{
    "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
    }
}

This is the JS I have tried and doesn't work when loading in the json, I am using a script tag on top of my HTML page.

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>";
      
         });

CodePudding user response：

You can't use require on the client-side. As already mentioned in a comment, it's part of CommonJS and available for server-side JavaScript, typically in the scope of NodeJS. Check this answer for more details.

If you want to fetch other files, you'll have to use the browser's fetch API to load the file for you. As mentioned in another comment, to test this locally, you would have to spawn a webserver.

CodePudding user response：

Using a relative path ./ should work.

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