如何在 AngularJS 中使用 JSON 数组?

2023-12-28

我在这里想做的是,我想使用使用 Spring Restful WebService 生成的 JSON,如下所示:

[
    {
        "userid": 1,
        "firstName": "kevin",
        "lastName": "buruk",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    },
    {
        "userid": 2,
        "firstName": "helm",
        "lastName": "krpuk",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    },
    {
        "userid": 3,
        "firstName": "batok",
        "lastName": "kelapa",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    }
]

该 JSON 是由我的 Java Spring MVC 控制器中的此函数生成的,如下所示:

SpringController.java

@RestController
@RequestMapping("/service/")
public class SpringServiceController {

    UserService userService = new UserService();

    @RequestMapping(method = RequestMethod.GET,headers="Accept=application/json")
    public List<User> getAllUsers() {
        List<User> users=userService.getAllUsers();
        return users;
    }
}

我即将将 JSON 值消费到角度表中,因此我将 JSON 值存储在范围内的角度对象中,这是我的 Javascript 代码。我将此文件命名为 app.js

app.js

function Hello($scope, $http) {
    $http.get('http://localhost:8080/SpringServiceJsonSample/service/').
        success(function(data) {
            $scope.users = data;
        });
}

这是我的 html 页面。我将其命名为index.html 索引.html

<html ng-app>
<head>
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
    <div ng-controller="Hello">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.userid}}</td>
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
            <td>{{user.email}}</td>
        </tr>
    </tbody>
    </div>
</body>
</html>

我在这里错过了什么?我不会展示任何东西。在此之前,我尝试使用只有一条记录的 JSON,它工作正常。但这次我尝试消耗数组,但失败了。我在这里错过了什么?是 JSON 还是我的 javascript?


首先,你必须使用最新版本的 Angular。现在,它是 1.4.5,具有更多性能优化和功能。

关于您的问题:html代码错误。这是固定版本

function Hello($scope, $http) {
    $scope.users = [
    {
        "userid": 1,
        "firstName": "kevin",
        "lastName": "buruk",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    },
    {
        "userid": 2,
        "firstName": "helm",
        "lastName": "krpuk",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    },
    {
        "userid": 3,
        "firstName": "batok",
        "lastName": "kelapa",
        "email": "[email protected] /cdn-cgi/l/email-protection"
    }
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
    <table ng-controller="Hello">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.userid}}</td>
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
            <td>{{user.email}}</td>
        </tr>
    </tbody>
    </table>
</body>

正如你所看到的,我通过只添加一个 html 标签来修复它!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 AngularJS 中使用 JSON 数组? 的相关文章

  • 在我的 Spring Boot 示例中无法打开版本 3 中的 Swagger UI

    我在 Spring Boot 示例中打开 swagger ui 时遇到问题 当我访问 localhost 8080 swagger ui 或 localhost 8080 root api name swagger ui 时出现这种错误 S
  • Java 和 Python 可以在同一个应用程序中共存吗?

    我需要一个 Java 实例直接从 Python 实例数据存储中获取数据 我不知道这是否可能 数据存储是否透明 唯一 或者每个实例 如果它们确实可以共存 都有其单独的数据存储 总结一下 Java 应用程序如何从 Python 应用程序的数据存
  • 尝试将 Web 服务部署到 TomEE 时出现“找不到...的 appInfo”

    我有一个非常简单的项目 用于培训目的 它是一个 RESTful Web 服务 我使用 js css 和 html 创建了一个客户端 我正在尝试将该服务部署到 TomEE 这是我尝试部署时遇到的错误 我在这里做错了什么 刚刚遇到这个问题 我曾
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • 如何使用 jUnit 将测试用例添加到套件中?

    我有 2 个测试类 都扩展了TestCase 每个类都包含一堆针对我的程序运行的单独测试 如何将这两个类 以及它们拥有的所有测试 作为同一套件的一部分执行 我正在使用 jUnit 4 8 在 jUnit4 中你有这样的东西 RunWith
  • Cucumber 0.4.3 (cuke4duke) 与 java + maven gem 问题

    我最近开始为 Cucumber 安装一个示例项目 并尝试使用 maven java 运行它 我遵循了这个指南 http www goodercode com wp using cucumber tests with maven and ja
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 我如何在java中读取二进制数据文件

    因此 我正在为学校做一个项目 我需要读取二进制数据文件并使用它来生成角色的统计数据 例如力量和智慧 它的设置是让前 8 位组成一个统计数据 我想知道执行此操作的实际语法是什么 是不是就像读文本文件一样 这样 File file new Fi
  • 干净构建 Java 命令行

    我正在使用命令行编译使用 eclipse 编写的项目 如下所示 javac file java 然后运行 java file args here 我将如何运行干净的构建或编译 每当我重新编译时 除非删除所有内容 否则更改不会受到影响 cla
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 使用 svn 1.8.x、subclise 1.10 的 m2e-subclipse 连接器在哪里?

    我读到 m2e 的生产商已经停止生产 svn 1 7 以外的任何版本的 m2e 连接器 Tigris 显然已经填补了维护 m2e subclipse 连接器的空缺 Q1 我的问题是 使用 svn 1 8 x 的 eclipse 更新 url
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • 当类声明出现编译错误“看起来像函数定义”时,这意味着什么?

    我最近遇到了这个问题 我发现很多人问这个问题 在这里 例如 http www codeguru com forum showthread php p 982326 但没有具体答案 这是从该链接提取的示例代码 class AFX BASE A
  • 如何查找“不是过程”错误

    define comp f g lambda x f g x define complement f cond equal comp f lambda g g t f equal comp f lambda g g f t compleme
  • 是否存在经过认证(ISO 26262 或类似)的 C++ 标准库? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 虽然存在经过认证的 C 工具链 编译器等 但我没有找到任何经过认证的 C 标准库 STL 有谁知道有人
  • 猫鼬不同并填充文档

    我有以下模型 var followerSchema new Schema id follower type Schema Types ObjectId ref Users id post type Schema Types ObjectId
  • REST API 单个请求 - 多个响应

    我正在 JAX RS 2 0 JDK 8 中编写 REST API 以满足以下要求 POST API 服务器 文件上传 多部分表单数据 我需要在其中发送一个大 AI Adobe Illustrator 文件 服务器获取文件并返回状态 202
  • 如何在 html 中设置适用于 Internet Explorer 的背景图像? [复制]

    这个问题在这里已经有答案了 以下CSS代码在Internet Explorer中不起作用 请建议我在Internet Explorer中设置背景的解决方案 body background url images Login BG png no
  • ucfirst 不适用于非英语字符[重复]

    这个问题在这里已经有答案了 我正在尝试将字符串中的第一个字母设为大写 它适用于英文字母 但不幸的是 它不适用于非英文字符 例如 echo ucfirst a la 使 ucfirst 对所有单词 包括非英语字符 正常工作的正确方法是什么 对
  • 使用 LLVM 按参数传递结构

    是否可以通过参数传递结构 它与 C abi 兼容吗 edit 基本上 我希望有一个包含两个成员的 C POD 该结构将是一个胖指针 带有一个指针和一个整数 并且能够在调用指令中将此结构作为函数参数传递 即使在调用 C代码 我现在没有使用胖指
  • 是否可以将钱从 PayPal 帐户转入银行帐户或信用卡?

    我正在使用未来的贝宝付款方式进行付款 我想使用 PayPal 访问令牌将钱从 PayPal 帐户转移到银行或信用卡 但我找不到任何正确的方法来做到这一点 有什么方法可以吗 没有可用于以编程方式自动执行此操作的 API 但您可以从 PayPa
  • 使用雪花连接器获取数据会引发 EmptyPyArrowIterator 错误

    我在 python 脚本 plotly dash 应用程序 中使用 python Snowflake 连接器 今天 在我不更改代码的情况下 该应用程序停止工作 我尝试了一些方法来找出可能出现的问题 我什至尝试运行示例代码雪花文档 https
  • 未捕获的 ReferenceError:进程未定义/第 0 行:解析错误

    For a simple Create React App https create react app dev project I run npm install Then npm start opens the default web
  • MongoDB - 使用嵌套字典查找条目

    我有一个与 python 一起使用的 MongoDB 我的条目如下所示 a something b something c d something e something f something 我想查询具有特定 d 和 e 值的条目 但我
  • 无锁竞技场分配器实现 - 正确吗?

    对于一个简单的指针增量分配器 它们有正式名称吗 我正在寻找一种无锁算法 这看起来微不足道 但我想得到一些反馈 看看我的实现是否正确 非线程安全实现 byte head current head of remaining buffer byt
  • Java全对算法

    给定一个整数集合 有什么 Java 算法可以给出所有的项对 如下所示 给定示例集合 1 3 5 我们想要输出 1 1 3 3 5 5 1 3 1 5 3 5 请注意 顺序并不重要 因此我们需要 1 3 3 1 之一 但不能同时两者 这应该适
  • 检测 Windows Phone 7 是否连接到桌面 Zune 软件

    我已经在 Windows Phone 7 应用程序上工作了几个月 并且拥有一组有用的检测标志 这些标志用于测试代码是否在模拟器中 后台 前台线程上或在设计时间 看完整列表在这里 http silverlightzxing codeplex
  • (html) phpmyadmin 中文本字段的所见即所得编辑器

    我正在制作一个小型网站 我需要谁接手来添加一些内容 存储在三个表中 到 2013 年 9 月最多将有 500 条记录 小东西 现在我正在使用 phpmyadmin 但添加文本 其中一个表格是一个迷你博客 需要基本的 html 技能 我确信
  • Python文件缓存

    我正在从文件创建一些对象 来自模板 xsd 文件的验证器 以将其他 xsd 文件组合在一起 并且我想在磁盘上的文件发生更改时重新创建对象 我可以创建类似的东西 def getobj fname cache try obj lastloade
  • L2 取指未命中率远高于 L1 取指未命中率

    我正在生成一个综合 C 基准测试 旨在通过以下 Python 脚本导致大量指令获取丢失 usr bin env python import tempfile import random import sys if name main fun
  • Azure 函数-System.Net.Http

    我遇到了很多麻烦System Net Http使用 Azure Functions 时的库 如果我在门户中创建一个全新的 httptrigger 函数 它就可以正常工作 不过 我想用我自己的预编译汇编 https github com Az
  • 如何在 AngularJS 中使用 JSON 数组?

    我在这里想做的是 我想使用使用 Spring Restful WebService 生成的 JSON 如下所示 userid 1 firstName kevin lastName buruk email email protected cd