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

The open source HPCC Systems platform is a proven, easy to use solution for managing data at scale. Visit our Easy Guide to learn more about this completely free platform, test drive some code in the online Playground, and get started today.

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!

Managing data at scale doesn’t have to be hard. Find out how the completely free, open source HPCC Systems platform makes it easier to update, easier to program, easier to integrate data, and easier to manage clusters. Download and get started today.

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

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}