current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm attempting to use ng-grid to display a table of data. However, I'm confused as how to place the data into the angular array to display, as examples show from angular-ui that this is the way to go. Below is a service defined for a rails api call

  app.factory('ProviderMedicalService', ['$resource', function($resource) {
     function ProviderMedicalService() {
       this.service = $resource('/api/provider_medical_services/:providerMedicalServiceId',      {providerMedicalServiceId: '@id'});
     };
     ProviderMedicalService.prototype.all = function() {
       return this.service.query();
     };
   return new ProviderMedicalService;
 }]);

this snippet of code was taken from a tutorial that integrates rails with angular. the $resource is the json data that is made from a custom rails api call. I'm assuming the return new ProviderMedicalServices returns the json data

(function() {
 app.controller('ModalDemoCtrl', ['$scope', 'ProviderMedicalService', '$resource', '$modal', function($scope, ProviderMedicalService, $resource, $modal) {
$scope.provider_medical_services = ProviderMedicalService.all();

In the controller that wraps the table, the tutorial states that the $scope.provider_medical_services helps us extend the api later down the road.

currently my json data is displaying properly, except that it is not being formatted into the table format because of my setup.The following code is just what i'm trying to attempt, and i understand that the data should be inside the controller passed to the array

<div class="gridStyle" ng-grid="gridOptions">
  <ul>
   <li ng-repeat="service in provider_medical_services">
    <p>{{service.name}}  {{service.cash_price | currency}} {{service.average_price |   currency}}</p>
    <p></p>
    <p></p>
   </li>
  </ul>
</div>

basically, my question is how do i pass from the factory into the array like this example?

  $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
})

edit for image because cant post image in comments

enter image description here

share|improve this question
    
can you share a jsfiddle or jsbin link –  spiderman Jul 8 '14 at 23:21

2 Answers 2

up vote 0 down vote

I'll give you my example on passing the factory data

Javascript:

fruit = angular.module("fruit", []);

fruit.factory("Fruit", function() {
  return {
    fruits: [
      {name: "Bananas", description: "Yellow and peely"}, 
      {name: "Canteloupe", description: "Tell if its ripe by smelling them"}, 
      {name: "Cherries", description: "Dont try to make jam out of sweet ones"}, 
      {name: "Strawberries", description: "Picking them is murder on your back"},
      {name: "Tomatoes", description: "People used to think they were poisonous" }
     ]
  };
});


fruit.controller("FruitCtrl", function($scope, Fruit) {
  $scope.fruits = Fruit.fruits;
});

HTML:

<!DOCTYPE html>
<html ng-app="fruit">
<head>
<meta name="description" content="Factory example" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="FruitCtrl">
  <ul>
    <li ng-repeat="fruit in fruits">{{fruit.name}}</li>
  </ul>
</body>
</html>

edit in response to OP's comment below:

eg:

fruit.factory('Fruit', function($resource){
    return $resource('http://localhost/folder1/fruitData.json');
});

Also need to inject the dependency of ['ngResource'] in the angular module

Also try this:

[To handle arrays with the $resource service, you can use the query method]

  var fruitData= $resource('http://localhost/folder1/fruitData/');
    $scope.items = fruitData.query();
share|improve this answer
    
what the if the factory data is retrieved through a $resource? through a url? Reason being is because i'm using a rails api to build the json data then retrieve it –  Apprentice Programmer Jul 8 '14 at 23:31
    
do you then display items in the array using ng-repeat item in items? –  Apprentice Programmer Jul 9 '14 at 0:00
    
yes, that's correct –  spiderman Jul 9 '14 at 0:54
up vote 0 down vote

I'm guessing that instead of

$scope.gridOptions = { data: 'myData' };

you'll want 

$scope.gridOptions = { data: 'provider_medical_services'};
share|improve this answer
    
its a good start, but data is overlapping... do you know if its possible to inject data into array? –  Apprentice Programmer Jul 8 '14 at 22:54
    
what do you mean by overlapping? could you post some sample data? –  PixnBits Jul 8 '14 at 23:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.