I am creating hybrid application by using Intel xdk and I am using jQuery Mobile for UI, I am trying to display my JSON data into my label, first up all let me tell you UI design how i need. I have two buttons (increment, decrement) in between these two buttons I have one label. For ex: Let us consider we will set label value is "2015"(current year), if I click increment button my value is increasing like 2016,2017 and so on. Same like decrement button if I click the values will go 2014,2013 and so on. This is my header UI design is ok, let me come to content side, in content side I am going to display JSON data from URL according to above year is displaying for ex: suppose 2015 is there in my label, I have to display only 2015 data("sports day" refer my below(message)JSON) into my content div tag. Now if I increment 2016 by using increment button, I have to display only 2016 data("Culturals" refer my below(message)json) into my same content page and it should not display previous value data(2015 data). I attached my requirement images how I need just check these two links
https://drive.google.com/file/d/0B9RwnaNuUwNdQlg5aVIwSklaX3M/view
https://drive.google.com/file/d/0B9RwnaNuUwNdaTktTTR4eGdReE0/view
This is my URL Json Data(2015 data)
{
"circular":
[
{
"id":"9",
"year":"2015",
"date":"2015-04-17",
"message":"Sports day",
"timestamp":"2015-04-18 19:14:24",
},
]
}
This is my URL Json Data(2016 data)
{
"circular":
[
{
"id":"10",
"year":"2016",
"date":"2015-04-17",
"message":"Culturals",
"timestamp":"2015-04-18 19:14:24",
},
]
}
Now I am getting data in same page itself which means 2015 data and 2016 data is showing in same page itself while clicking increment button. I want to display 2016 data separately not including 2015 data. I am using mustache concept to display JSON data
//this function is for getting json data from URL
$.fn.myFunction = function() {
$.getJSON(url, function(data){
for (var i=0, len=data.circular.length; i < len; i++) {
output = data.circular[i];
alert(output.message);
}
//this is for displaying json data
var template =$('#sharesTemplate').html();
//data.circular is my json data
var html = Mustache.to_html(template,data.circular);
$('#samplearea1').append(html).appendTo(this);
});
}
This is my mustache code for displaying JSON data dynamically
<div id="samplearea1"></div>
<script id="sharesTemplate" type="text/template">
{{#.}}
<h1>{{message}}</h1>
{{/.}}
</script>