How to Parse / Read JSON using Phonegap / Apache Cordova

parse-read-json-using-phonegap
parse-read-json-using-phonegap
parse-read-json-using-phonegap

Parse / Read JSON using Phonegap / Apache Cordova

In this tutorial we’re going to learn how to Read JSON using Phonegap / Apache Cordova from remote server Want to Know More about JSON ? http://www.w3schools.com/json/

What is JSON ?

JSON Stands for JavaScript Object Notation, JSON is a syntax for storing and exchanging data and It is an easier-to-use alternative to XML. JSON uses JavaScript syntax, but the JSON format is text only, just like XML.

Sample JSON Data

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

Methods Available for reading JSON using JQuery

  1. Using getJSON method
  2. Using Ajax method

How to Parse / Read JSON data using Phonegap / Apache Cordova ?

Here i’ve Used http://phonegappro.esy.es/test/json.php for generating JSON output.

My JSON Output

[{"id":"1","title":"Phonegap Training","duration":"Basic to advanced phonegap trainin","price":"100 USD"},{"id":"2","title":"PHP Training","duration":"Learn Php from basics","price":"99 USD"},{"id":"3","title":"test","duration":"123","price":"123"},{"id":"4","title":"Phonegap","duration":"40","price":"18000"},{"id":"5","title":"test","duration":"123","price":"1231234"},{"id":"6","title":"From mobile","duration":"40","price":"13568"},{"id":"7","title":"Stinky","duration":"Conni","price":"Dunno"},{"id":"8","title":"ef","duration":"asfd","price":"adsf"},{"id":"9","title":"adfer","duration":"21e","price":"123"},{"id":"10","title":"test1","duration":"15days","price":"4000"},{"id":"11","title":"test1","duration":"15days","price":"4000"},{"id":"12","title":"tesy","duration":"sdf","price":"HGD"},{"id":"13","title":"kj","duration":"h","price":"h"},{"id":"14","title":"asdfasf","duration":"asdf","price":"234"},{"id":"15","title":"kjb","duration":"tgfeqq","price":"ggj"},{"id":"16","title":"exampl","duration":"2","price":"123"},{"id":"17","title":"abcd","duration":"34","price":"2341"},{"id":"18","title":"From mobilr","duration":"637","price":"637"},{"id":"19","title":"Gebdhhd","duration":"638849","price":"2527"},{"id":"20","title":"Phonegap from Browser","duration":"40","price":"123"}]

Parse / Read JSON Data using getJSON for Phonegap / Apache Cordova Projects


$(document).ready(function() {
    $.getJSON("http://phonegappro.esy.es/test/json.php",function(result){
      $.each(result, function(i, field){
        $("#output").append("Title: "+ field.title + " duration: "+field.duration +" Price:"+field.price+"<br/>");
     });
    });
 });

Full Example (getJSON.html)


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>READ JSON Example (getJSON)</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $.getJSON("http://phonegappro.esy.es/test/json.php",function(result){
 $.each(result, function(i, field){
 $("#output").append("Title: "+ field.title + " duration: "+field.duration +" Price:"+field.price+"<br/>");
 });
 });
 });
 </script>
</head>
<body>
 <div id="output"></div>
</body>
</html>

Parse / Read JSON Data using AJAX for Phonegap / Apache Cordova Projects

Using AJAX method


$.ajax({
 type: "GET",
 url: "http://phonegappro.esy.es/test/json.php",
 crossDomain: true,
 cache: false,
 success: function(result){
 var result=$.parseJSON(result);
 $.each(result, function(i, field){
 $("#output").append("Title: "+ field.title + " duration: "+field.duration +" Price:"+field.price+"<br/>");
 });
 }
 });

Full Example using AJAX


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>READ JSON Example (AJAX)</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $.ajax({
 type: "GET",
 url: "http://phonegappro.esy.es/test/json.php",
 crossDomain: true,
 cache: false,
 success: function(result){
 var result=$.parseJSON(result);
 $.each(result, function(i, field){
 $("#output").append("Title: "+ field.title + " duration: "+field.duration +" Price:"+field.price+"<br/>");
 });
 }
 });
 });
 </script>
</head>
<body>
 <div id="output">

 </div>
</body>
</html>
  • Martin Ndegwa

    Hi, i have built this app with only one file index.html on build.phonegap.com, when i run the app i get a white page, please help

    • Hosted your php file on server ?
      You need to change server url ?

    • Esinniobiwa Quareeb

      Iused all my server parameter
      In db file: host = examplesite.com, username =”examplename”, password = “examplepassword”

      In index.html, i made it look like ds: http://examplesite.com/phonegap/database/insert.php

      as well as other CRUD files
      The problem is, it worked perfectly on localhost, when i hosted it, it still worked. I mean accessing examplesite.com/phonegap
      It still worked but when i packed my apk using build.phonegap.com

      It just kept wrting connecting, please help

  • Harika Gunti

    Hi, am unable to retrieve data from this url http://elite-schedule.net/api/leaguedata/2029, Can you please solve my problem

  • Esinniobiwa Quareeb

    Iused all my server parameter
    In db file: host = examplesite.com, username =”examplename”, password = “examplepassword”

    In index.html, i made it look like ds: http://examplesite.com/phonegap/database/insert.php

    as well as other CRUD files
    The problem is, it worked perfectly on localhost, when i hosted it, it still worked. I mean accessing examplesite.com/phonegap
    It still worked but when i packed my apk using build.phonegap.com

    It just kept wrting connecting, please help,

  • AnnieXclusive Ezurike

    My php file runs perfectly on localhost, but when I use the same code on visual studio 2015 taco, it gives json error “Uncaught SyntaxError: Unexpected token < in JSON…"
    Can you paste your php code here for me pls?

    • I don’t have knowledge in visual studio, but you can host your file in some remote server & test it

  • iambiomed

    Hi. This works fine on browser but when I build the app, I can’t see the JSON data.

  • Mayur Wagh

    Hello,
    this is work perfectly with single data and single . but i want multiple data value to different divs and also different html element. Thank you in advance.

  • Kevin Sanchez

    With all those running into problems with white pages and errors. My solution was to include a JS library that handles jsonp requests. JQuery and angularJS both support this, the problem was that my server had some cross-domain polocies that wouldn’t allow my application to access page requests via ajax. Look into jsonp to find out how to incorporate it into your application. Hope this helps.