【问题标题】：data parsing not working in angularjs数据解析在angularjs中不起作用
【发布时间】：2017-02-15 18:43:04
【问题描述】：

我试图将我的 JSON 数据解析为 angular js 应用程序，但解析在我的 wamp 服务器上不起作用。当我点击登录页面上的提交按钮时，没有任何响应。请告知我的代码哪里出错了。

Controller.js：

var app = angular.module("empApp", []);
app.controller("emp", ['$scope', 'empService', function($scope, empService){
  $scope.doSearch = function(){
    empService.findEmployeeById($scope.searchEmpno, function(r){
      $scope.empno = r.empno;
      $scope.ename = r.ename;
      $scope.edept = r.edept;
      $scope.esal = r.esal;
    });
  };
}]);

app.service("empService", ['$http', '$log', function($http, $log){
    this.findEmployeeById = function(empno, cb){
        $http({
            url: 'http://localhost/',
            method: 'GET'
        })
      .then(function(resp){
          cb(resp.data);
        }, function(resp){
          $log.error('Error occurred');
        });
    };
  }
}]);

app.directive('empDetails', function(){
  return {
    templateUrl: 'emp-details.html'
  }
});

HTML

    <body ng-app="empApp">
    <div class="container-fluid">
        <div ng-controller="emp">
            <form class="form-inline">
                <div class="form-group">
                    <label>Enter Employee No:</label>
                    <input type="text" name="name" class="form-control" ng-model="searchEmpno"/>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" ng-click="doSearch()">Click</button>
                </div>
            </form>
            <hr>
            <div emp-details ng-if="empno != undefined">    
            </div>
        </div>
    </div>
    </body>

emp-details.html

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3>Employee details</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-4"><strong>Employee No</strong></div>
            <div class="col-sm-7">{{empno}}</div>
        </div>
        <div class="row">
            <div class="col-sm-4"><strong>Name:</strong></div>
            <div class="col-sm-7">{{ename}}</div>
        </div>
        <div class="row">
            <div class="col-sm-4"><strong>Department:</strong></div>
            <div class="col-sm-7">{{edept}}</div>
        </div>
    </div>
</div>

JSON：

{
"employee":{ "empno": 251, "name":"John", "age":30, "edept":"New York" }
}

【问题讨论】：

你能分享你项目的文件夹structure吗？你在为你的项目使用服务器吗？ @Muhammad 是对的，您的 URL 定义不正确。通过了解您的文件夹结构，我将能够提供更多帮助。
所有文件都放在同一个位置。我在浏览器中找到以下 URL 的文件：localhost/login.html C:\wamp\www controller.js data.json emp-details.html login.html
看看我的回答。让我知道它是否对您有用。
@AllJs，它不工作......
我刚刚编辑了代码。看看它，让我知道。夫妇的事情。您没有正确调用控制器中的服务（您应该始终使用then(...) 回调，一旦您的$http 完成。另一件事是您的服务定义中不需要cb。

标签： javascript angularjs json html twitter-bootstrap-3

【解决方案1】：

大部分问题都与项目结构和文件组织有关。

我建议阅读 johnpapa-angular-styleguide 以正确组织和编码 angularJS 应用程序。

需要进行多项更改。

您没有引用您的 Controller.js 文件。
还有一个 } 在为您服务
没有像 data.json 这样的文件。您将需要创建该文件并在您的服务中引用它。 $http({ url: 'data.json', method: 'GET' })
在您的服务中，您将返回resp.data。应该是resp.data.employee。

cb(resp.data.employee);

当你引用路径时，你应该使用relative URL。

查看工作中的plnkr

【讨论】：

【解决方案2】：

这几个：

将您的 URL 从 'http://localhost/' 更改为 'data.json'
在回调中，将resp.data 更改为resp.data.employee。这将确保您可以直接访问员工数据。

如果这有帮助，请告诉我。

Controller.js

$scope.doSearch = function(employeeN){
    empService.findEmployeeById(employeeN)
    .then(function(r){
       $scope.empno = r.empno;
       $scope.ename = r.ename;
       $scope.edept = r.edept;
       $scope.esal = r.esal;
    });
};

服务

this.findEmployeeById = function(empno){
    $http({
        url: 'http://localhost/data.json',
        method: 'GET'
    })
    .then(function(resp){
      return resp.data.employee;
    }, function(resp){
      $log.error('Error occurred');
    });
};

HTML

<div>
     <button type="button" class="btn btn-primary" ng-click="doSearch(searchEmpno)">Click</button>
</div>

【讨论】：