Question

I am new to working with Javascript/JQuery so apolygies if there are other q&a’s that solve my problem. In short, I am trying to create a mobile application which pulls some data from Parse and uses this to populate a list on a html page when this page is loaded.

So far I have the javascript file (‘dataController’) below:

if(!window.dataCon){
DataCon = {};
}

$(document).ready(function(){
DataCon.getApps = function(){

  renderApps= function(data){
                for(var i = 0;i<data.results.length;i++)
                {            

                  var rec = data.results[i];

                  var appTitle;

                  if(rec.title) appTitle = rec.title;
                  else appTitle = "Title Unknown";

                  var appCategory;

                  if(rec.category) appCategory = rec.category;
                  else appCategory = "Category Unknown";

                  var appLastBuilt;

                  if(rec.lastBuilt) appLastBuilt = rec.lastBuilt;
                  else appLastBuilt = "unknown";

                  $("#myList").append('<li><a href=""><h3>'+ appTitle +'</h3><p>'+ appCategory +'</p><p>'+ appLastBuilt +'</p></a></li>');

                  $("#myList").listview('refresh'); // This line now updates the listview
              }
}

        $.ajax({
        url:      App.Config.endpoint+"/1/classes/Applications",
        contentType: "application/json",
        type:     "GET",
        headers:{
        'X-Parse-Application-Id': App.Config.applicationId  ,
        'X-Parse-REST-API-Key': App.Config.masterKey
        },
        dataType: "json",
        success:  function(data) {

        renderApps(data);
        },
        error:function (xhr, ajaxOptions, thrownError){
                    alert('error Status:'+xhr.status);
                } 
    });
}// JavaScript Document
});

This is an extract from my .html file

<ul id="myList" data-role="listview" data-theme="g" inset="true"">      
</ul>

I also have a js file which configures the Parse information i.e. applicationId, masterKey and endpoint. My problem is that when I load the html file which uses the ‘dataController’ js file nothing is displayed in the list! I am not sure what I am doing wrong. Any assistance or pointers would be much appreciated. Thanks

Answer 1

Your functions definition needs a bit of refactoring, try this:

  function renderApps(data){
                for(var i = 0;i<data.results.length;i++)
                {            

                  var rec = data.results[i];

                  var appTitle;

                  if(rec.title) appTitle = rec.title;
                  else appTitle = "Title Unknown";

                  var appCategory;

                  if(rec.category) appCategory = rec.category;
                  else appCategory = "Category Unknown";

                  var appLastBuilt;

                  if(rec.lastBuilt) appLastBuilt = rec.lastBuilt;
                  else appLastBuilt = "unknown";

                  $("#myList").append('<li><a href=""><h3>'+ appTitle +'</h3><p>'+ appCategory +'</p><p>'+ appLastBuilt +'</p></a></li>');

                  $("#myList").listview('refresh'); // This line now updates the listview
              }
}

$(document).ready(function(){
        $.ajax({
        url:      App.Config.endpoint+"/1/classes/Applications",
        contentType: "application/json",
        type:     "GET",
        headers:{
        'X-Parse-Application-Id': App.Config.applicationId  ,
        'X-Parse-REST-API-Key': App.Config.masterKey
        },
        dataType: "json",
        success:  function(data) {
                renderApps(data);
        },
        error:function (xhr, ajaxOptions, thrownError){
                    alert('error Status:'+xhr.status);
                } 
    });
});

Hope this helps