JSON-P

Angular.md

Angular

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="countryApp">
  <div ng-controller="CountryCtrl">
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>Population</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="country in countries">
          <td>{{country.name}}</td>
          <td>{{country.population}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

JavaScript

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK';

var countryApp = angular.module('countryApp', []);

countryApp.controller('CountryCtrl', function($scope, $http) {
  $http.jsonp(jsonDataUrl)
    .success(function(data) {
      console.log(data);
      $scope.countries = data;
    });
});

CSS

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

ExtJS.md

Ext JS

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune-debug.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>

<div id="countryApp"></div>

JavaScript

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=Ext.data.JsonP.callback1';

Ext.onReady(function() {
  Ext.define('app.model.Country', {
    extend: 'Ext.data.Model',
    fields: [{
      name: 'name',
      type: 'string'
    }, {
      name: 'population',
      type: 'int'
    }]
  });

  Ext.create('Ext.data.Store', {
    storeId: 'countryStore',
    model: 'app.model.Country',
    autoLoad: true,
    proxy: {
      type: 'jsonp',
      url: jsonDataUrl,
      reader: {
        type: 'json'
      }
    }
  });

  var tpl = new Ext.XTemplate(
    '<table class="view_table">',
      '<thead>',
        '<tr>',
          '<th>Name</th>',
          '<th>Population</th>',
        '</tr>',
      '</thead>',
      '<tbody>',    
        '<tpl for=".">',    
          '<tr>',
            '<td>{name}</td>',
            '<td>{population}</td>',
          '</tr>',
        '</tpl>', 
      '</tbody>',
    '</table>'
  );
  
  Ext.create('Ext.DataView', {
    width    : 500,
    height   : 200,
    renderTo : 'countryApp',
    store    : Ext.getStore('countryStore'),
    tpl      : tpl    
  });
});

CSS

body {
  background: #FFF !important;
}
table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

jQuery.md

jQuery

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="countryTable">
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK';

$(function() {
  $.ajax({
    type: 'GET',
    url: jsonDataUrl,
    async: false,
    jsonpCallback: 'JSON_CALLBACK',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data) {
      addRows($('#countryTable'), data, ['name','population']);
    },
    error: function(e) {
      console.log(e.message);
    }
  });
});

function addRows(table, data, fields) {
  var tbody = table.find('tbody');
  $.each(data, function(i, item) {
    tbody.append(addRow(item, fields));
  });
  return tbody;
}

function addRow(item, fields) {
  var row = $('<tr>');
  $.each(fields, function(i, field) {
    row.append($('<td>').html(item[field]));
  });
  return row;
}

CSS

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}