Question

I’m building an hybrid Android App using Phonegap/Apache Cordova. My app should get data from my web api. I’m using JSON to serve the data to the APP. So i got a the following code:

function init() { 
document.addEventListener('deviceready', onDeviceReady, false);
var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
    $.getJSON(url,function(data){
        jsonresults = data;
          $.each(jsonresults, function(i,v){
          $('#main-content').append('<li>'+jsonresults[i].name+'</li>');
        });
    });
}

and also on the body of the html i have a div called main-content. Everythings works fine in the Eclipse browser, but on the Android Emulator is not working. Not sure if there’s another way to pull data from Web API using JSON and dinamically create HMTL elements after getting the data.

https://gist.github.com/2956660

Answer 1

It is very easy to get data from web api. Try this code. It will solve your problem,

It is very easy through jquery mobile. You can do your job with normal Ajax and little bit of JSON. I done with php server. Here the sample code,

Sending request to server through jquery.

$.ajax({
          url: <your Server URL>,
          dataType: 'jsonp',
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
                             /*Process your response here*/

      jsonresults = data;
      $.each(jsonresults, function(i,v){
      $('#main-content').append('<li>'+jsonresults[i].name+'</li>');
    });

 $.mobile.changePage($('#index')); /*page navigate the particular where data shown*/
 $("#index").trigger("pagecreate"); /*This is like a page refresh and load the injected data in jquery*/
                        }
       });

In php server file,

<?php
$data="I am sending response to you";

/*you have to mention this callback compulsory*/

echo $_GET['jsoncallback'] . '(' . json_encode($data) . ');';
?>