Json data not displaying on html server

Question

I have a micro controller that communicates between C and it's html server using json. I have two json files: status.json, and serial.json. status.json displays fine, but serial.json will not display for some reason?

I have confirmed that serial.json is displaying correctly on the html server so my issue will be from the javascript/JQuery/HTML code.

here is what /serialdata.json looks like

{"serial":"XXSerialTestXX"}

here is my jQuery/Javascript code

function getSerialData() {
    $.getJSON( "/serialdata.json", function( data ) {
        if(data.hasOwnProperty('serial') && data['serial'] != "") {
            $("#serial").text(data["serial"]);
        }
    })
}

here is my html code

<div id="Instructions">
    <h2>Follow These Intructions to set up your device</h2>
    <section>
        <body>follow these steps to set up your device!</body>
        <div id="serial"></div>
    </section>
</div>

if i change div id to to an id I set from status.json it works fine, but the serial id from serial.json does not work, does my code look fine?

what do you mean by calling it? I have included the script in the HTML code I thought that is enough and it includes all functions? I confirmed the java script code is being loaded by my HTML. Thanks for fast response! — AceSammy
– AceSammy, Commented Dec 27, 2018 at 5:18
You actually can define a function without calling it. What @YaakovAinspan wants to know is if you are actually running the function in your script by writing getSerialData() somewhere. — pellul
– pellul, Commented Dec 27, 2018 at 5:23
so no I am not calling the script anywhere I just have it defined. — AceSammy
– AceSammy, Commented Dec 27, 2018 at 5:25

pellul · Accepted Answer · 2018-12-27 05:35:05Z

1

Make sure that your script is calling your getSerialData() method.

With declaration

// Declare getSerialData()
function getSerialData() {
  $.getJSON('/serialdata.json', function(data) {
    if (data.hasOwnProperty('serial') && data['serial'] != "") {
      $('#serial').text(data['serial']);
    }
  });
}

// Call the function.
getSerialData();

Without declaration

If you don't need to call the function anywhere else, you can just omit the function declaration and write directly your code

$.getJSON('/serialdata.json', function(data) {
  if (data.hasOwnProperty('serial') && data['serial'] != "") {
    $('#serial').text(data['serial']);
  }
});

answered Dec 27, 2018 at 5:35

pellul

1,0311 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AceSammy Over a year ago

worked thanks a bunch! I am new new javascript more of a embedded system guy.

Shababb Karim · Accepted Answer · 2018-12-27 05:32:59Z

0

Try calling the function on the onReady event of the document. This one line below the getSerialData function declaration should do.

$(getSerialData)

answered Dec 27, 2018 at 5:32

Shababb Karim

3,7631 gold badge24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Json data not displaying on html server

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related