2015-04-06 88 views
1

對不起,如果這太簡單了,我是JSON和Angular的新手。 所以,我有一個JSON服務器響應,我不太明白,我需要閱讀使用AngularJS。這是JSON。閱讀與角的JSON

{ 
    "$id": "1", 
    "$values": 
    [ 
     { 
     "$id": "2", 
     "ID": 2, 
     "FiscalYear": "", 
     "Month": 1, 
     "Day": 1, 
     "Surname": "test", 
     "FirstName": "test", 
     "Program": "smart", 
     "PoliceFileNumber": "123", 
     "CourtFileNumber": 123, 
     "Service": "1", 
     "VictimOfIncident": "yes", 
     "FamilyVoilenceFile": "123", 
     "Gender": "M", 
     "Ethnicity": "1", 
     "Age": "22", 
     "AssignedWorker": 1, 
     "StatusOfFile": 1 
     } 
    ] 
} 

這表示從我的數據庫中的表查詢。

1)我不明白的是爲什麼它在開始時包含了id和值?

2)如何訪問值內的變量?例如,如何讀取月份值?

在服務器我有這樣的:

public class ClientDTOesController : ApiController 
{ 
    private LookupContext db = new LookupContext(); 

    // GET: api/ClientDTOes 
    public IQueryable<ClientDTO> GetClientsDTO() 
    { 

     return db.ClientsDTO; 
    } 

這是我的模型:

public partial class ClientDTO 
{ 
    public int ID { get; set; } 

    public String FiscalYear { get; set; } 

    public int Month { get; set; } 

    public int Day { get; set; } 

    public string Surname { get; set; } 

    public string FirstName { get; set; } 

    public String Program { get; set; } 

    public string PoliceFileNumber { get; set; } 

    public int CourtFileNumber { get; set; } 

    public String Service { get; set; } 

    public String VictimOfIncident { get; set; } 

    public String FamilyVoilenceFile { get; set; } 

    public string Gender { get; set; } 

    public String Ethnicity { get; set; } 

    public String Age { get; set; } 

    public int AssignedWorker { get; set; } 

    public int StatusOfFile { get; set; } 

} 

我的客戶代碼:

(function() { 

    // creates a module and register to the app 
    var app = angular.module('ReportViewer', []); 

    // controller declaration 
    var MainController = function ($scope, ReportService) { 

     // object model 
     var _Client = { 
      Age: "", 
      CourtFileNumber: "", 
      Day: "", 
      Ethnicity: "", 
      FamilyVoilenceFile: "", 
      FirstName: "", 
      FiscalYear: "", 
      Gender: "", 
      Month: "", 
      PoliceFileNumber: "", 
      Program: "", 
      Service: "", 
      Surname: "", 
      VictimOfIncident: "" 
     }; 

     // GET ALL 
     var onGetAllComplete = function (data) { 
      $scope.clients = data; 
     }; 

     var onGetAllError = function (reason) { 
      $scope.error = "Could not get all clients."; 
     }; 

     // accessed from the view 
     // calls the service function 
     $scope.getClient = function() { 
      ReportService.getAllClients() 
        .then(onGetAllComplete, onGetAllError); 
     }; 

     // exposes the 'object' 
     $scope.client = _Client; 
    }; 

    //register the controller to the app 
    app.controller("MainController", MainController); 
}()); 

,服務:

// ReportService.js 

(function() { 

    var ReportService = function ($http) { 

     var baseUrl = 'http://localhost:16188/api/Report/ReportClient/1/1'; 

     var _getAllClients = function() { 
      return $http.get(baseUrl) 
       .then(function (response) { 
        return response.data 
       }); 
     }; 

     return { 
      getAllClients: _getAllClients 
     }; 
    }; 

    var module = angular.module("ReportViewer"); 
    module.factory("ReportService", ReportService); 
}()); 

我想在這裏顯示的值:

<!DOCTYPE html> 
<html data-ng-app="ReportViewer"> 
<head> 
    <title>Report</title> 
    <script src="../Scripts/AngularJS/angular.js"></script> 

    <script src="../Scripts/App/MainController.js"></script> 
    <script src="../Scripts/App/ReportService.js"></script> 


</head> 
<body data-ng-controller="MainController"> 
    <div id="wrapper" class="container"> 
     <div class="summary"> 
      <h1>Worker summary & detail report</h1> 
      <button ng-click="getClient()">Get All Clients</button> 
      <div id="test" ng-show="clients" > 
       <p>{{client.courtFileNumber}}</p> 
       <p>{{client.Day}}</p> 
       <p>{{client.Ethnicity}}</p> 
       <p>{{client.FamilyVoilenceFile}}</p> 
       <p>{{client.FirstName}}</p> 
       <p>{{client.FiscalYear}}</p> 
       <p>{{client.Gender}}</p> 
       <p>{{client.Month}}</p> 
       <p>{{client.PoliceFileNumber}}</p> 
       <p>{{client.Program}}</p> 
       <p>{{client.Service}}</p> 
       <p>{{client.Surname}}</p> 
       <p>{{client.VictimOfIncident}}</p> 
      </div> 

非常感謝您的任何建議。

+1

我會建議你分開的兩個問題(服務器端和客戶端),你都面臨着。首先,你應該解決服務器端問題,你不能創建你真正想要的json響應,而不需要混合客戶端的angularjs代碼。這個建議會改變你的問題標題和標籤,這樣你就很容易接受服務器端問題的答案。 – yazaki 2015-04-06 04:56:24

+0

只是其他用戶的建議。爲了弄清楚如何閱讀上面的JSON,我使用腳本標籤製作了一個簡單的html頁面,並將JSON數據分配給了一個變量。然後,使用瀏覽器控制檯,我可以使用該變量來瀏覽其屬性。例如,假設變量名爲info:info。$ values [0] .PropertyName。 – 2015-04-06 22:15:53

回答

1

你的代碼看起來很完美,基本上問題在於你的HTML,你可以使用ng-repeat作爲循環的循環,它將遍歷所有客戶端並顯示它。

標記

<div id="test" ng-repeat="client in clients.$values"> 
    <p>{{client.courtFileNumber}}</p> 
    <p>{{client.Day}}</p> 
    <p>{{client.Ethnicity}}</p> 
    <p>{{client.FamilyVoilenceFile}}</p> 
    <p>{{client.FirstName}}</p> 
    <p>{{client.FiscalYear}}</p> 
    <p>{{client.Gender}}</p> 
    <p>{{client.Month}}</p> 
    <p>{{client.PoliceFileNumber}}</p> 
    <p>{{client.Program}}</p> 
    <p>{{client.Service}}</p> 
    <p>{{client.Surname}}</p> 
    <p>{{client.VictimOfIncident}}</p> 
</div> 
+0

謝謝你,@ pankajparkar。它解決了這個問題。 – 2015-04-06 22:11:08

+0

@RafaelRozon請做upvote&接受我的答案..很高興幫助您,謝謝 – 2015-04-07 10:47:56

+0

@RafaelRozon如果此答案解決了您的問題,請將其標記爲已通過點擊灰色的標記。 – cst1992 2016-02-24 05:22:12