我試圖解析我的JSON數據角js應用程序，但解析不工作在我的wamp服務器上。當我點擊登錄頁面上的提交按鈕時，沒有任何迴應。請告訴我在我的代碼中犯了什麼錯誤。數據解析不工作在angularjs

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" } 
}

來源

2017-02-15 burner

可以共享文件夾的工作'structure'？您是否在爲您的項目使用服務器？ @穆罕默德是正確的，你的網址沒有正確定義。通過了解您的文件夾結構，我將能夠提供更多幫助。 – AllJs

所有文件都放在同一位置。我找到該文件在我的瀏覽器以下URL：http：//localhost/login.html C：\ WAMP \ WWW controller.js data.json EMP-details.html 的login.html – burner

檢查出我的回答。讓我知道它是否適合你。 – AllJs

大部分的問題是RELA專注於項目結構和文件組織。

我建議您閱讀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

來源

2017-02-15 09:44:28

感謝您澄清問題... – burner

夫婦這樣的：

更改您的網址從'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>

來源

2017-02-15 06:22:35 AllJs

數據解析不工作在angularjs

回答

大部分的問題是RELA專注於項目結構和文件組織。

相關問題