External JSON Data Load

External JSON Data Load From JSFiddle using PHP to add appropriate headers and return data

by Alex Azuero

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app="rgLoadExternalData" ng-controller="DataController">
    <button ng-click="loadData()">Load Data</button>
    <br/>
    <div style="background:#ccc;padding:10px;margin:10px;">
        {{extData}}
    </div>
</div>

CSS

/*

// This is datasource.php

<?php
// Allow access from anywhere. Can be domains or * (any)
header('Access-Control-Allow-Origin: *');

// Allow these methods of data retrieval
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

// Allow these header types
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

// Create our data object in that crazy unique PHP way
$arr = array(array("artist" => 1, "artistName" => "AC/DC", "genre" => "Rock", "image" => "acdc.jpg", "description" => "AC/DC are an Australian hard rock band, formed in 1973 by brothers Malcolm and Angus Young. To date they are one of the highest-grossing bands of all time."));

// Return as JSON
echo json_encode($arr);
?>

*/

JavaScript

var app = angular.module("rgLoadExternalData",[]);

app.controller("DataController", function($scope, $http) {
    $scope.loadData = function() {
        $http({method:'GET',         url:'ttps://api.wmata.com/Bus.svc/json/jBusPositions?RouteID=B30&api_key=11070c26c3224c15bfef321427708beb',}).
        success(function(data) {
            $scope.extData = data;
        })
    }

});