AngularJS - 使用结果从Factory读取JSON

时间:2013-12-13 22:59:50

标签: javascript json angularjs

Angular的新手,并坚持应该很容易的事情......

我有一些资源:

.factory( 'RSVPRes', function ( $resource )  {
  return {
    RSVP: $resource("../reservations/:id.json", {id:'@id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}),
    Meals: $resource('../meals.json'),
    UserInvites: $resource('../userinvite.json')
  };
})

Meals.json:

[{"id":1,"name":"Chicken","description":"Chicken Yum!","created_at":"2013-12-11T22:37:28.994Z","updated_at":"2013-12-11T22:37:28.994Z","event_id":1,"event":{"name":"Wedding"}},{"id":2,"name":"Steak","description":"9oz","created_at":"2013-12-11T22:37:29.004Z","updated_at":"2013-12-11T22:37:29.004Z","event_id":2,"event":{"name":"Rehersal"}},{"id":3,"name":"Veggie","description":"Vegan","created_at":"2013-12-11T22:37:29.008Z","updated_at":"2013-12-11T22:37:29.008Z","event_id":3,"event":{"name":"Stag"}}]

UserInvites.json:

[{"id":18,"created_at":"2013-12-11T23:00:18.684Z","updated_at":"2013-12-11T23:00:18.684Z","event_id":1,"registry_id":1,"user_id":9,"total_in_party":2}]

数据似乎格式相同。一切都很好。

已编辑现在在我的控制器中

.controller('RSVPCtrl', function RSVPController($scope, RSVPRes, $state, $stateParams) {

  //GET INVITATION(S)
  RSVPRes.UserInvites.query().$promise.then(function(response){
    $scope.invitation = response.data;
    //BUILD SELECT LIST FOR MEALS
    $scope.meals = RSVPRes.Meals.query();

    //EDIT
    if ($scope.rsvpId) {
      $scope.rsvp = RSVPRes.RSVP.get({id: $scope.rsvpId}, function() {
        // $scope.selectedUser = $scope.invite.user_id;
        // $scope.selectedEvent = $scope.invite.event_id;
        // $scope.selectedRegistry = $scope.invite.registry_id;
        // $scope.selectedTotalInParty =  $scope.invite.total_in_party;
      });
    }
    //NEW 
    else {
      //INITIALIZE EMPTY GUESTS
      $scope.guests = [];
      for (var i = 0; i < $scope.invitation.total_in_party; i++) {
        $scope.guests[i] = {
          first_name: '',
          last_name: '',
          meal: 1,
          rsvp: 0
        };
      }
    }
  });

  $scope.submit = function() {
    for (var i = 0; i < $scope.guests.length; i++){
       $scope.rsvp = new RSVPRes.RSVP();
       $scope.rsvp.first_name = $scope.guests[i].first_name;
       $scope.rsvp.last_name = $scope.guests[i].last_name;
       $scope.rsvp.meal_id = $scope.guests[i].meal;
       $scope.rsvp.rsvp = $scope.guests[i].rsvp;
       $scope.rsvp.$save();
    }
    $state.transitionTo('rsvps');
  };
})

检查我的response.data我得到了我的信息,但我的$ scope.invitation仍未定义......

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:2)

看起来您的 response.data 将是一个数组,这意味着[$ scope.invitation]更好地命名为[$ scope.invitations],因为您已设置为获取(可能) ) 超过一个。并且多次邀请可能性表明您设置用于构建空客户对象的For循环不太正确。也许试试这个...

for (var i = 0; i < $scope.invitation.length; i++){
    $scope.guests[i] = [];
    for (var j=0; j < $scope.guests[i].total_in_party; j++) {
        $scope.guests[i].total_in_party[j] = {
            first_name: '',
            last_name: '',
            meal: 1,
            rsvp: 0
        };
      }
    }
}

答案 1 :(得分:1)

我认为您在reponse的回调中$resource混淆了response $http GET调用response。您应该在资源的回调中仅使用resource.data而不是 //GET INVITATION(S) RSVPRes.UserInvites.query().$promise.then(function(response){ $scope.invitation = response; //BUILD SELECT LIST FOR MEALS $scope.meals = RSVPRes.Meals.query(); //EDIT if ($scope.rsvpId) { /* $scope.rsvp = RSVPRes.RSVP.get({id: $scope.rsvpId}, function() { // $scope.selectedUser = $scope.invite.user_id; // $scope.selectedEvent = $scope.invite.event_id; // $scope.selectedRegistry = $scope.invite.registry_id; // $scope.selectedTotalInParty = $scope.invite.total_in_party; });*/ } //NEW else { //INITIALIZE EMPTY GUESTS $scope.guests = []; for (var i = 0; i < $scope.invitation.total_in_party; i++) { $scope.guests[i] = { first_name: '', last_name: '', meal: 1, rsvp: 0 }; } } }); 。像这样:

resource

来自docs

  

$ promise:创建的原始服务器交互的承诺   这个实例或集合。

     

成功时,使用相同的资源实例解析promise   集合对象,使用服务器中的数据更新。这很容易   在$ routeProvider.when()的resolve部分中使用来推迟查看   渲染,直到加载资源。

     

失败时,使用http响应对象解析promise,   没有资源属性。

因此,如果成功$http的回复与{{1}}来电不同。

工作示例:http://plnkr.co/edit/k7rMLJmQpbwWJMcfqcvl?p=preview