Loading form data from json

Question

I like to improve my code. I want to load the html form data from a json file by using ajax.

here is my code:

<script type="text/javascript" >
            function getFile(path, success) {
                var req = new XMLHttpRequest();
                    req.open("GET", path, true);
                    req.onreadystatechange = function () {
                        if (req.readyState === 4) {
                            if (req.status === 200) {
                                success(req.responseText);       // call a function with the received value
                            } else {
                                console.log("unexpected response status " + req.status);
                            }
                        }
                    };
                req.send(null);
            }
                    function load() {
                getFile('config.json', function (allText) {
                    var configdata = JSON.parse(allText);
                    document.getElementById("devicename").value = configdata.devicename;
                    document.getElementById("mqtt_host").value = configdata.mqtt_host;
                    document.getElementById("mqtt_username").value = configdata.mqtt_username;
                    document.getElementById("mqtt_pass").value = configdata.mqtt_pass;
                    document.getElementById("mqtt_port").value = configdata.mqtt_port;
                    document.getElementById("mqtt_ssl").value = configdata.mqtt_ssl;
                    });
                    }
        </script>

any points to improve??

file looks like:

{
  "devicename": "t",
  "mqtt_host": "z",
  "mqtt_username": "z",
  "mqtt_pass": "t",
  "mqtt_port": "7",
  "mqtt_ssl": "65"
}

Thanks

Yup you could fetch the data from JSON and use it in your code. I hope this will solve https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript — Abin Thaha, Aug 28 '21 at 12:53
This question would probably fit better in [code review](https://codereview.stackexchange.com/). — TYeung, Aug 28 '21 at 13:01

score 0 · Answer 1 · answered Aug 28 '21 at 13:00

0

If json data contains id's of the elements, than you can use for loop:

getFile('config.json', function(allText) {
  var configdata = JSON.parse(allText);
  for(let id in configdata)
    document.getElementById(id).value = configdata[id];
});

answered Aug 28 '21 at 13:00

vanowm

9,466
2
21
37

score 0 · Answer 2 · answered Aug 28 '21 at 13:17

On modern browsers you can use fetch(), so there will be no need for your getfile() function.

const d={
  "devicename": "t",
  "mqtt_host": "z",
  "mqtt_username": "z",
  "mqtt_pass": "t",
  "mqtt_port": "7",
  "mqtt_ssl": "65"
};

// fetch("config.json").then(r=>r.json()).then(d=>
 Object.entries(d).map(([k,v])=>
  document.getElementById(k).value=v)
// )

<input type="text" id="devicename"> device<br>
<input type="text" id="mqtt_host"> host<br>
<input type="text" id="mqtt_username"> user<br>
<input type="text" id="mqtt_pass"> password<br>
<input type="text" id="mqtt_port"> port<br>
<input type="text" id="mqtt_ssl"> ssl

Loading form data from json

2 Answers2