use AngularJs NgResource to load JSON file from localhost

All we need is an easy explanation of the problem, so here it is.


I am building an app (running on MAMP) that holds contact information that will expand to hold more data such as project name & deadline, once this part is functional.


When the user visits /projects.php#/project/ I would like them to see a list of all the project names with a link to their detail page.

  1. How should I write the following to access all of my data?

Do I need the .json at the end?

What does the @id do?

return $resource('data/project.json/:id', {id: '@id'});

When the user visits /projects.php#/project/a-gran-goodn I would like them to see the details about this project(for now, just the name & address).

  1. How should I write the following to return my data by Id?
    $scope.project = $ ? Project.get({id: $}): new Project();

plunkr file


This file lives on http://localhost:8888/angularjs/ProjectsManager/data/project.json

{ "address" : [ " 3156 Dusty Highway",
        " Teaneck New Jersey 07009-6370 US"
        "id" : "a-gran-goodn",
        "name" : "Grania Goodner",
        "phone" : " (862) 531-9163"
{ "address" : [ " 62 Red Fawn Moor",
        " Rodney Village West Virginia 25911-8091 US"
        "id" : "b-aime-defranc",
        "name" : "Aimery Defranco",
        "phone" : " (681) 324-9946"


var projectsApp = angular.module('projects', ['ngResource']);

projectsApp.config(function($routeProvider) {
          .when('/', {
    controller: 'ProjectListCtrl',
    templateUrl: 'partials/projectlist.html'})
          .when('project/:id', {
    controller: 'ProjectDetailCtrl',
    templateUrl: 'partials/projectdetail.html'

projectsApp.factory('Project', function($resource) {
  return $resource('data/project.json/:id', {id: '@id'});

projectsApp.controller('ProjectListCtrl', function(Project, $scope) {
  $scope.projects = Project.query();

projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) {
  $scope.project = $
          ? Project.get({id: $})
          : new Project();


<a href="#/project/" rel="nofollow noreferrer noopener" class="btn">Add new item</a>
<ul class="unstyled">
    <li ng-repeat="project in projects">
    <div class="well">    
      <h2><small>{{}}</small> {{}}</h2>
      <a href="#/project/{{}}" rel="nofollow noreferrer noopener" class="btn btn-link">View Info for {{}}</a>


<p>Name: {{}}</p>
<p>Phone Number: {{}}</p>
<p ng-repeat="line in project.address">{{line}}</p>


header('Access-Control-Allow-Origin: *');
<!doctype html>
<html ng-app="projects">
    <meta charset="utf-8">
    <title ng-bind="title" ng-cloak>Restaurant &mdash;</title>

    <link href="" rel="nofollow noreferrer noopener" rel="stylesheet">

  <body ng-controller="ProjectListCtrl">
    <a class="brand" href="#" rel="nofollow noreferrer noopener">Projects Manager</a>

    <div id="app-container" class="container-fluid">
      <div class="row-fluid">
        <div class="span12" id="main" ng-view>
      <footer>Copyright Projects &copy; 2013</footer>

    <script src=""></script>
    <script src="//"></script>

    <!-- Don't forget to load angularjs AND angular-resource.js --> 
    <script src=""></script>
    <script src="></script>
    <script src="app.js"></script>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Since you can’t query against a raw JSON file like you can with RESTful-style URLs (which is what $resource is built to do), you can instead get a copy of the JSON and then build your own query, get, etc. that looks at the data and returns the right thing. It’s a bit tricky because you also want to support new Project, which doesn’t really make sense when using a file-backed store, but this example supports it:

projectsApp.factory('Project', function($http) {
  // Create an internal promise that resolves to the data inside project.json;
  // we'll use this promise in our own API to get the data we need.
  var json = $http.get('project.json').then(function(response) {

  // A basic JavaScript constructor to create new projects;
  // passed in data gets copied directly to the object.
  // (This is not the best design, but works for this demo.)
  var Project = function(data) {
    if (data) angular.copy(data, this);

  // The query function returns an promise that resolves to
  // an array of Projects, one for each in the JSON.
  Project.query = function() {
    return json.then(function(data) {
      return {
        return new Project(project);

  // The get function returns a promise that resolves to a
  // specific project, found by ID. We find it by looping
  // over all of them and checking to see if the IDs match.
  Project.get = function(id) {
    return json.then(function(data) {
      var result = null;
      angular.forEach(data, function(project) {
        if ( == id) result = new Project(project);
      return result;

  // Finally, the factory itself returns the entire
  // Project constructor (which has `query` and `get` attached).
  return Project;

You can use the results of query and get like any other promise:

projectsApp.controller('ProjectListCtrl', function(Project, $scope) {
  $scope.projects = Project.query();

projectsApp.controller('ProjectDetailCtrl', function(Project, $routeParams, $scope) {
  $scope.project = $
          ? Project.get($
          : new Project();

Note the change to Project.get($; also, the updated Plunker also fixes a problem in your $routeProvider configuration.

This is all demonstrated here:

Method 2

i will paste here a generic code i use to fetch json from your local or a remoteserver maybe it will help you:

it uses a factory that you can call when you need it.

app.factory('jsonFactory', function($http) {  
  var jsonFactory= {      
    fromServer: function() {        
        var url = '';
            var promise = $http.jsonp(url).then(function (response) {
      return promise;
    hospitals: function() {     
        var url = 'jsons/hospitals.js';               
            var promise = $http.get(url).then(function (response) {
      return promise;
  return jsonFactory;

Then when you need to call it:

function cardinalCtrl(jsonFactory, $scope, $filter, $routeParams) {


Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply