Question

很抱歉，如果这太简单了，我是JSON和Angular的新手。所以，我在JSON中有一个服务器响应，我不太了解，我需要使用AngularJS阅读。这是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）如何访问值内的变量？例如，如何读取Month值？

在服务器中我有这个：

 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>

非常感谢您的任何建议。

Answer 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>

用Angular读取JSON

1 个答案: