parse-read-json-using-phonegap

How to Parse / Read JSON using Phonegap / Apache Cordova

Want create site? Find Free WordPress Themes and plugins.
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>
Did you find apk for android? You can find new Free Android Games and apps.
  • 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.

MyMail WordPress Plugin free
Save $50 USD on Ionic Firebase Chat Source CodeEXPLORE