个人中心
gpt4 book ai didi

javascript - 使用 Angular 读取 JSON

转载 作者：行者123 更新时间：2023-11-28 00:26:18 27 4
gpt4 key购买 nike

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

这代表来 self 数据库中的表的查询。

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>

非常感谢您的建议。

最佳答案

你的代码看起来很完美，基本上问题出在你的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>

关于javascript - 使用 Angular 读取 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29464381/

27 4 0
文章推荐： javascript - suitecrm 的网络引导形式在 WordPress 中不起作用
文章推荐： html - Apple Store 的输入框如何防止用户点击被视为点击提示短语的搜索框？
文章推荐： c++ - Winsock c++，程序在连接到离线服务器时卡住
文章推荐： html -
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com