Geek Answers Handbook

Dynamic HTML update using getJSON

I am new to both HTML and Javascript, but I have a problem when I try to create a dynamic page. I have to update the tags on the webpage, getting rows from the JSON database every 5 seconds. My code looks something like this:

HTML:

<label id="tag1">0</label>

JavaScript:

$(document).ready(function(){
  $.ajaxSetup({ cache: false });
  setInterval(function() {
    $.getJSON("js/database.json",function(data){
      if (data.tag1 == true) {
        $('#tag1').text(data.tag1);
      }
    });
  },5000);
});

This part that I put after all the blocks <body>

JSON:

{
    "database": [
        {
            "tag1": "<!-- AWP_In_Variable Name='\"database\".tag1' -->"
        },
        {
            "tag2": "<!-- AWP_In_Variable Name='\"database\".tag2' -->"
        },
        {
            "tag3": "<!-- AWP_In_Variable Name='\"database\".tag3' -->"
        },
        {
            "tag4": "<!-- AWP_In_Variable Name='\"database\".tag4' -->"
        },
        {
            "tag5": "<!-- AWP_In_Variable Name='\"database\".tag5' -->"
        },
        {
            "tag6": "<!-- AWP_In_Variable Name='\"database\".tag6' -->"
        }
    ]
}

Does anyone know what the problem is? The webpage does not update id1 at all.

Thanks in advance.

+4
source share
1 answer

A small mistake in your access data. You need to check data['database']:

$(document).ready(function(){
  $.ajaxSetup({ cache: false });
  setInterval(function() {
    $.getJSON("js/database.json",function(data){
      data = data['database']; // You need to check in the first one!
      if (data.tag1 == true) {
        $('#tag1').text(data.tag1);
      }
    });
  }, 5000);
});
+3
source

More articles:


All Articles