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

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

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!

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

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 }}