3

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> 
Amal Dev
  • 1,938
  • 1
  • 14
  • 26

0 Answers0