I honestly spend days in researching before I finally signed up and I tried several different solutions (pure Javascript, jQuery), but none of them worked. Here's the Problem:

I'm writing a program which opens a local .html-file to display several things. The main.html lies in a folder structure like that: Project/html.

Now I'd like to store some Data in a .JSON-file, read this file and add the content to a <select> or a <table>. Later, also user-input shall be written to the .JSON-file for persistent storage. The .JSON file is saved in Project/data.

The first .JSONs looks like this:

{
   "machines": [
       {
           "Name": "Great machine",
           "IP": "great.ip"
       },
       {
            "Name": "another great machine",
            "IP": "foo.bar"
        }
   ]
}

In this case I want to read the names and add them as options to a <select> and in another place read both, name and IP, and add them to a <table>.

Later, I want to read a new name and IP from two inputs and write them to the .JSON.

The second .JSON looks like this:

{
   "shifts": [
       {
           "Description": "early",
           "Beginning": "06:00",
           "End": "15:00"
       },
       {
            "Description": "late",
            "Beginning": "15:00",
            "End": "22:00"
        },
        {
            "Description": "night",
            "Beginning": "22:00",
            "End": "6:00"
        }
   ]
}

In this case, I want to read the data and connect it, so that it looks like this: "night: 22:00 - 6:00"

And again reading inputs and save new data to the .JSONs.

In both cases, the data shall be displayed as <select>-Option and in a <table>. In the case of the <select>, the data must be displayed and also be the value of the option (see example of <select> below), because I read the values in other places and need the same format.

The program itself is written in Go, but I tried to read the JSON directly in the main.html with Javascript. In fact, writing this lines, I'm thinking, if it wouldn't be easier to do all this in Go and send it to the main.html, but I don't know how to do that either.

This is, what my select> looks like:

<select id="shiftSelectMain" name="shiftSelectMain">
    <option value="-- Choose Shift --" selected="selected">-- Choose shift --</option>
    <option value="exampleShift1: 06:00 - 15:00">exampleShift1: 06:00 - 15:00</option>
    <option value="exampleShift2: 15:00 - 22:00">exampleShift2: 15:00 - 22:00</option>
</select>

This are two different Versions I already tried with different modifications (the lines, which are commented out for example), following different suggestions.Maybe I just need a onLoad() or something like that somewhere in the code, to trigger the script?

<script type="text/javascript" src="../scripts/jquery.min.js"></script>
<script>
    var object = JSON.parse("../scripts/jquery.min.js")

    $(function () {

        var shifts = [];

        $.getJSON("../data/shifts.json", function (data) {
            $.each(data, function (key, val) {
                var jsonReadout = val.Description + ": " + val.Beginning + " - " + val.End

                /* var option = document.createElement('newOption'); */
                var newOption = $('<option/>');

                /* newOption.text = jsonReadout; 
                newOption.value = jsonReadout; */
                newOption.text(jsonReadout);
                newOption.attr('value', jsonReadout);

                /* document.getElementById('shiftSelectMain').add(newOption); */
                $('#shiftSelectMain').append(newOption);
            });
        });
    });
</script>  

    <script>
        function loadJSON(callback) {

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', './data/shifts.json', true);
        xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {

        // .open will NOT return a value but simply returns undefined in async mode so use a callback
        callback(xobj.responseText);
        }
        }
        xobj.send(null);

        }

        // Call to function with anonymous callback
        loadJSON(function(response) {
        // Do Something with the response e.g.
        jsonresponse = JSON.parse(response);

        // Assuming json data is wrapped in square brackets as Drew suggests
        var jsonReadout = jsonresponse.shifts[0].Description + ": " + jsonresponse.shifts[0].Beginning + " - " + jsonresponse.shifts[0].End
        
        var option = document.createElement('newOption');
        newOption.text(jsonReadout);
        newOption.attr('value', jsonReadout);

        document.getElementById('shiftSelectMain').add(newOption); */
        $('#shiftSelectMain').append(newOption);
        });
    </script>
    

If anybody has a working solution, it would be very appreciated!