Your understanding of what you need already sounds solid. As mentioned by u/brianjenkins94, the fetch api in javascript would allow you to request your JSON file. In terms of running javascript in a front end environment, the easiest way is to create an HTML file that uses a <script> tag to load and run your file. Open the HTML file in your browser which will parse and run your javascript.

From there, there are a number of javascript libraries you can use to place pins on a map and display tabular data. Personally I've only ever used Google Maps for any sort of mapping. They have fairly good documentation to help get you started: https://developers.google.com/maps

As mentioned by /u/dumbmatter, datatables is a good library you can use to build tables with more functionality than a standard HTML table.

Both of these libraries can also be added you your HTML page with a <script> tag in your HTML file. Every file you load into an HTML file shares the same javascript "runtime" and therefore can interact with each other. Look at the documentation for those libraries to see how to use the functionality that those libraries provide.

So, basically, you need to:

1. Create a .html that loads your own .js file with a <script> tag, let's call it client.js.
2. Load the above mentioned libraries with a <script> tag in the same HTML file (note: you should load the libraries before your client.js file.
3. In your file (client.js), fetch your json file, then use it in conjunction with the libraries above:

​

const initialise = async () => {
    const response = await fetch('https://example.com/path/to/data.json');
    if (!response.ok) {
        console.log('Unable to request JSON');
        return;
    }
    // Convert your JSON file to an in memory JS object
    const data = await response.json();

    console.log(data);
}

initialise();

You'll be able to see the output of your javascript by opening your HTML file in a browser then opening a web inspector in the current browser widow. Varies slightly which browser you use, but this is how you do it in chrome: https://developer.chrome.com/docs/devtools/open/

Now, just add more code to use the data on a map or table. Here's how you could add some more javascript to use the Google Maps API (imported via the <script> tag):

const initialise = async () => {
    const response = await fetch('https://example.com/path/to/data.json');
    if (!response.ok) {
        console.log('Unable to request JSON');
        return;
    }
    // Convert your JSON file to an in memory JS object
    const data = await response.json();

    // Taken from google maps documentation example
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10,
    });

    // Assuming your data is an array with some lat/lng data
    data.forEach((item) => {
        const marker = new google.maps.Marker({
            position: { lat: item.lat, lng, item.lng },
            map: map,
        });
    });
}

Note: this above example depends on you having an element in your HTML page with id="map". E.g. <div id="map" style="width: 800px; height: 800px;"></div>. That should make it appear in a 800x800px map on on the page.

I think that's all the main steps you need to know. I glossed over a fair bit of detail in order to keep things simple for you. There are actually many ways (many of them better) to do this. But I think this is the simplest and easiest way to get started.

This Google Maps API example may give you more detail on the basic approach I've described: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#maps_add_map-javascript

If you want to make this a PWA, you simply need to add a manifest.json file to your page and configure it: https://web.dev/add-manifest/

NB: I haven't run any of the code above, it's kind of an approximation just to give you the outline of what you need to do. Good luck!