Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Parsing JSON in PhoneGap/Apache Cordova [Code Snippets]

DZone's Guide to

Parsing JSON in PhoneGap/Apache Cordova [Code Snippets]

JSON is an easier-to-use alternative to XML that uses JavaScript syntax to store and exchange data. Check out some code snippets to learn more about it!

· Big Data Zone
Free Resource

Learn best practices according to DataOps. Download the free O'Reilly eBook on building a modern Big Data platform.

JSON stands for JavaScript Object Notation. It's a syntax for storing and exchanging data and 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 the getJSON method.
  2. Using the ajax method.

Parse/Read JSON Data With PhoneGap/Apache Cordova

Sample JSON input:

[
  {
    "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 With getJSON

$(document).ready(function() {
    $.getJSON("https://www.devquora.com/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://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.getJSON("https://www.devquora.com/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 With ajax

Using ajax method:

$.ajax({
    type: "GET",
    url: "https://www.devquora.com/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://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "https://www.devquora.com/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>

And that's it!

Find the perfect platform for a scalable self-service model to manage Big Data workloads in the Cloud. Download the free O'Reilly eBook to learn more.

Topics:
phonegap ,cordova ,json ,parsing data ,big data

Published at DZone with permission of Devquora Sharad. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}