Hello! I'm very new with Javascript and I'm working to modify some demo files that I found.
I'm trying to display JSON data in a div on an HTML page. It's working, but only for two pieces of data:
The web page:
The script:
<script>
fetch('/config/config.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'EOS IP ' + data[i].eosIP + "<br>" + "EOS OSC Tx Port " + data[i].eosTxPort; + "<br>" + "EOS OSC Rx Port " + data[i].eosRxPort;
mainContainer.appendChild(div);
}
}
</script>
The raw data:
So as you can see, I can only seem to display the first two lines of data. I feel like this is something in the loop, but I just don't have the experience to understand what's wrong. I would appreciate any guidance. Thanks!
