Tutorial Parsing JSON menggunakan AngularJS

Pada pembahasan materi kali ini kita akan belajar parsing data JSON menggunakan AngularJS.sebelum masuk pada pembahasan materi,mari kita mengenal tentang JSON terlebih dahulu .JSON (JavaScript Object Notation) merupakan suatu syntax atau format untuk menyimpan data atau digunakan dalam sebuah proses pertukaran data.Mengapa menggunakan JSON ? JSON memiliki beberapa keunggulan dibandingkan dengan XML terutama dapat penggunaan apikasi AJAX. kelebihan JSON antara lain :
JSON lebih ringkas, cepat, dan mudah.
JSON tidak menggunakan tag penutup
JSON lebih cepat untuk dibaca dan ditulis
JSON dapat menggunakan array
JSON tidak perlu menggunakan parser khusus untuk diubah menjadi sebuah objek, melainkan hanya perlu menggunakan function default dari JavaScript.untuk lebih lengkap lagi kalian bisa melihat dokumen di http://www.json.org/.

Pada contoh pembahasan kali kita akan mengambil data dari file JSON. sebagai berikut :

alt

Berikut file JSON yang di deklarasikan dalam news.json

  [
    {
      "NewsItemId": "1",
      "HeadLine": "Kursus Video Editing",
      "DateLine": "Posted by administrator on Dec 9, 2016",
      "WebURL": "http://erabelajar.com/other/#/blog/kursus-video-editing",
      "Caption": "Belajar Kursus Video Editting",
      "Image": {
        "Photo": "img/video-editing.jpg",
        "Thumb": "img/video-editing.jpg",
        "PhotoCaption": ""
      },
      "Keywords": "",
      "Story": "Ayo belajar Video Editing di ERA Belajar ,Pengajarnya adalah para Editor di TV ternama Indonesia lho.Ada beberapa pilihan software nya lho. Ada AVID, Final Cut Pro dan Adobe Premier Pro. Tinggal pilih sesuai keinginan kamu."
    },
    {
      "NewsItemId": "2",
      "HeadLine": "Kota dengan waktu kerja terlama",
      "DateLine": "Posted by administrator on Dec 9, 2016",
      "WebURL": "http://erabelajar.com/other/#/blog/kota-dengan-waktu-kerja-terlama",
      "Caption": "Hong Kong merupakan kota dengan waktu kerja terlama di dunia.",
      "Image": {
        "Photo": "img/pekerjaan.jpg",
        "Thumb": "img/pekerjaan.jpg",
        "PhotoCaption": ""
      },
      "Keywords": "",
      "Story": "Pekerja di Hongkong dapat bekerja sampai 10 jam dalam sehari, Rata-rata pekerja di Hongkong bekerja selama 2.606 jam per tahun. Apabila dibandingkan, pekerja di kota Paris hanya menghabiskan 1.604 jam dalam setahun untuk bekerja. Hal tersebut bahkan setengah dari rata-rata pekerja di hong kong."
    },
    {
      "NewsItemId": "3",
      "HeadLine": "Ini dia, Pohon yang bisa berjalan",
      "DateLine": "Posted by administrator on Dec 10, 2016",
      "WebURL": "http://erabelajar.com/other/#/blog/ini-dia,-pohon-yang-bisa-berjalan",
      "Caption": "Alam seringkali menunjukkan kita kejadian-kejadian unik yang mencengangkan. Seperti pohon yang satu ini. ",
      "Image": {
        "Photo": "img/tumbuhan.jpeg",
        "Thumb": "img/tumbuhan.jpeg",
        "PhotoCaption": ""
      },
      "Keywords": "",
      "Story": "Pohon dengan nama ilmiah Socratea Exorrhiza ini hidup di hutan Ekuador. Pohon ini  berjalan dengan menggunakan akarnya, karena akarnya berbentuk menjari dan mirip seperti kaki-kaki. Pohon ini dapat bergerak sejauh 2-3 cm per hari, sampai 20 meter per tahun."s
    }

  ]

Selanjutnya pada file app.js digunakan untuk mendeklarasikan controller pada AngularJS.

var app = angular.module('myApp', []);  
app.controller('newsController', function($scope, $http){  
    $http({method: 'POST', url: 'js/news.json'}).success(function(data)
    {
        $scope.beritas = data; // response data 
    });

 });

$http({method: 'POST', url: 'js/news.json'}) syntax berikut digunakan untuk memanggil file json dengan menggunakan method : POST ,url digunakan untuk menentukan dimana file json berada .

<div class="container" ng-app="myApp">  
    <div ng-controller="newsController">
        <!-- Add an News -->
        <div class="row"> 
        <!-- List of News -->
            <div class="row">
                <div class="col-xs-12">
                    <ul class="list-group" ng-repeat="berita in beritas">
                        <li class="list-group-item">
                            <h3><a style="text-decoration: none;" href="{{berita.WebURL}}">{{berita.HeadLine}}</a></h3>
                            <img src="{{berita.Image.Photo}}" class="img-responsive thumbnail" height="600px" width="400px"/>
                            {{berita.DateLine}}
                            <h5>{{berita.Caption}}</h5>
                            <p>{{berita.Story}}</p>
                        </li>
                    </ul>   
                </div>
            </div>
        </div>
    </div>
</div>

<div ng-controller="newsController"> digunakan untuk memanggil controller pada angularjs yang telah di deklarasikan dengan newsController. {{berita.HeadLine}} berfungsi untuk memanggil objek data pada JSON. "HeadLine": "Kursus Video Editing" dan juga {{berita.}} lainnya .

ng-repeat="berita in beritas digunakan untuk melakukan perulangan data yang telah di deklarasikan pada $http({method: 'POST', url: 'js/news.json'}).success(function(data) { $scope.beritas = data; // response data });

Berikut file AngularJS yang harus di load pada file index :

<script src="js/angular.min.js"></script>  
<script src="js/app.js"></script>  

Berikut Source code lengkapnya :

<html>  
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    
        <title>Parsing Json menggunakan AngularJs</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <span class="navbar-brand"><img src="img/logo-era.png" class="brand" style="margin-top: -9px;" height=30 /> News Era Belajar</span>
            </div>
          </div>
        </nav>
        <div class="container" ng-app="myApp">
            <div ng-controller="newsController">
                <!-- Add an News -->
                <div class="row"> 
                <!-- List of News -->
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list-group" ng-repeat="berita in beritas">
                                <li class="list-group-item">
                                    <h3><a style="text-decoration: none;" href="{{berita.WebURL}}">{{berita.HeadLine}}</a></h3>
                                    <img src="{{berita.Image.Photo}}" class="img-responsive thumbnail" height="600px" width="400px"/>
                                    {{berita.DateLine}}
                                    <h5>{{berita.Caption}}</h5>
                                    <p>{{berita.Story}}</p>
                                </li>
                            </ul>   
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/app.js"></script>
  </body>
</html>  

Source code Parsing JSON menggunakan AngularJS bisa didownload di
https://github.com/era-belajar/Parsing-JSON

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok