javascript - 使用 Angular Js 从 API 获取 Json 数据

标签 javascript json angularjs asp.net-web-api

我正在尝试使用 AngularJs 从 Dhis2 Api 获取数据。 .但数据未显示。我只是从 api 获取数据并在页面上显示名称和 id。但我没有收到任何错误,但没有显示数据,我不知道问题出在哪里。

这是我的 Angular js 文件,我在其中尝试使用 http.get 从 api 获取数据。

 angular.module('myApp', []).controller('userCtrl', function($scope,$http) {

init();
function init(){
        var apiUrl = "http://localhost:8080/api/organisationUnits.json";

        // Cross-site redirect error solution: Run chrome with --disable-web-security
        var base64 = "YWRtaW46ZGlzdHJpY3Q=";
    //$http.get(apiUrl, {headers: {'Authorization': 'Basic YWRtaW46ZGlzdHJpY3Q='}}).            
    $http.get(apiUrl, {headers: {'Authorization': 'Basic YWRtaW46ZGlzdHJpY3Q='}}).
        success(function(data) {

    // $scope.users = [];
         $scope.users = data;
         alert('success');
        }).
        error(function(data, status, headers, config) {
            alert("Error. Data: " + data);
        });
    }

这是我的 HTML 页面。我试图在其上显示我从 api 获得的名称和 id 。

    <body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">DHIS2</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <!--<li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> !-->
      </ul>
    </div>
  </div>
</nav>

<h4>Search For the Organization Units</h4>

<div class="row">


        <div class="col-sm-3 col-md-6" >
         <input type="text" class="form-control" ng-model="filters.search" placeholder="Search for Organization Units">
        </div>
        <div class="col-sm-9 col-md-6" >

       <label class="custom-select" >    
      <select  ng-model="filters.searchdd">
      <option selected disabled value="" style="display:block;"> Plese Select Level</option>
      <option  value="private">private</option>
      <option value="simple">simple</option>
      <option value="vip">vip</option>
      </select>  
           </label> 





    </div>

  </div>


<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>Organizational Units</th>
    <th>Levels</th>
      <th>Drop Down Menu
    </th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users | filter:filters.search| filter: filters.searchdd">
    <td>
      <button class="btn" ng-click="editUser(user.id)" >
      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{{ user.name }}</td>
    <td>{{ user.id }}</td>
      <td><label class="custom-select" >    
      <select  ng-model="filters.searchdd">
      <option selected disabled value="" style="display:block;"> Search or Edit</option>
      <option  value="1">Locate on Map</option>
      <option value="2">Edit Coordinates</option>
      <option value="3">Edit org. unit details</option>
           <option value="4">Add new facility</option>
      </select>  
           </label> </td>
  </tr></tbody>
</table>

最佳答案

您将数据传送到两个过滤器。你确定你的数据能通过他们吗?当然,似乎缺少一个右括号,但也许您只是在复制时错过了它。

关于javascript - 使用 Angular Js 从 API 获取 Json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33844696/

相关文章:

javascript - 对 Internet Explorer 8 及以下版本的 SVG 支持

asp.net-mvc - 如何启用 HTTP 压缩来压缩 JSON 文档

java - 使用 Jackson 将 Java 对象序列化为 JSON 时抑制包装器对象

javascript - 在angularjs中将id从一个页面传递到另一个页面

javascript - 运行 js 测试 - 获取 "Cannot use import statement outside of a module"

javascript - 将鼠标悬停在图像的一个点上,文本会出现在侧面

javascript - 在 http 请求上加载 Angular Spinner

javascript - Angular + php 不会从非 index.html 将数据加载到服务器

javascript - 使用 JavaScript 漂亮地打印 JSON

JavaScript 数组 JSON.parse(字符串)