Jump to content

Recommended Posts

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:

image.png.167c1b72ae626d833d08bef31ffcb87e.png

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:

image.png.a721469c2ab1323731e35f8b24667dfc.png

 

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!

Link to post
Share on other sites

You have a semi-colon ; in the middle of the statement which is causing the problem.

data[i].eosTxPort; + "<br>"

 

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...