Javascript 数据解析在angularjs中不起作用_Javascript_Angularjs_Json_Html_Twitter Bootstrap 3

Javascript 数据解析在angularjs中不起作用

javascript angularjs json html twitter-bootstrap-3

Javascript 数据解析在angularjs中不起作用,javascript,angularjs,json,html,twitter-bootstrap-3,Javascript,Angularjs,Json,Html,Twitter Bootstrap 3,我曾尝试将JSON数据解析到angular js应用程序，但解析在我的wamp服务器上不起作用。当我单击登录页面上的提交按钮时，没有响应。请告知我的代码哪里出错了 Controller.js: var app = angular.module("empApp", []); app.controller("emp", ['$scope', 'empService', function($scope, empService){ $scope.doSearch = function(){

我曾尝试将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'
  }
});

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

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>

其中两个：

从

更改您的URLhttp://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');
    });
};

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

HTML

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');
    });
};

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


点击

大多数问题与项目结构和文件组织有关。我建议阅读本文，以便正确组织和编写angularJS应用程序

需要进行多个更改

您没有引用您的
```
Controller.js
```
文件
还有一个附加的
```
}
```
在您的服务中
没有类似data.json的文件。您需要创建该文件并在服务中引用它。
```
$http({
url:'data.json'，
方法：“获取”
})
```
在您的服务中，您将返回相应的数据。它应该是
```
resp.data.employee
```
```
cb（分别数据员工）
```


引用路径时，应使用
查看工作
您能否共享项目的文件夹结构
？您的项目是否使用服务器@穆罕默德是对的，你的URL没有正确定义。通过了解您的文件夹结构，我将能够提供更多帮助。所有文件都放在同一位置。我在我的浏览器中找到该文件的URL为：C:\wamp\www controller.js data.json emp-details.html login.htmlCheck out my answer。让我知道它是否对你有用。@AllJs，它不起作用了……我只是编辑了代码。看一看，让我知道。两件事。您没有正确调用控制器中的服务（您应该在$http
完成后始终使用然后（…）
回调。另一件事是您的服务定义中不需要cb。