使用Angular读取JSON

Read JSON with Angular

本文关键字：JSON 读取 Angular 使用      更新时间：2023-09-26

很抱歉，如果这太简单，我是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>

非常感谢你的建议。

你的代码看起来很完美，基本上问题是HTML，你可以使用ng repeat，它的作用就像for循环一样，它将循环通过所有客户端并显示它。

标记

<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>
相关文章：