0

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>";
      
         });
user3042613
  • 1
  • 1
  • You'll have to set up a local server. I would recommend the npm package [http-server](https://www.npmjs.com/package/http-server), it requires no setup. Just run `npx http-server` in the root folder. – Olian04 Nov 14 '21 at 14:33

2 Answers2

0

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.

digitalbreed
  • 3,953
  • 4
  • 26
  • 24
-1

Using a relative path ./ should work.

var json = require('./api/ssltests.json');
Anil
  • 329
  • 2
  • 9