从 url 到 JSON 到 HTML

2024-01-09

我目前正在尝试学习 RESTful API 并将它们实现到用例中,我想做的一件事是将带有 json 有效负载的 url 从一台服务器加载到单独的 Web 服务器中,以在表上显示数据。我对此不太熟悉,所以我试图找到最好的方法来做到这一点。

我正在使用此 API 发布到domain.com/todos 页面

https://github.com/corylanou/tns-restful-json-api https://github.com/corylanou/tns-restful-json-api

然后我尝试用它将其打印到表格中https://github.com/sam-suresh/JSON-URL-to-HTML-Table https://github.com/sam-suresh/JSON-URL-to-HTML-Table

但它看起来并没有起作用。我将其全部放入一个索引文件中,它显示它在控制台上点击了我的 api,但我没有在表中显示任何输出。

<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }

</script>
</html>

这就是 /todos 页面上显示的内容

[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}

success 函数未传递原始数据。它传递了一个具有许多不同属性的对象。数据只是其中之一。尝试这个:

$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(results) {
        drawTable(results.data);
    }
});

也有可能是我记错了。我会放一个debugger在您的成功函数中查看它实际传递的内容,然后从那里开始。

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

从 url 到 JSON 到 HTML 的相关文章

  • 如何使用 JavaScript 上传文件而不进行回发?

    我正在 ASP NET 中进行文件上传 我用了
  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • 如何格式化折线图谷歌图表材料上的轴?

    我在格式化材料图表的轴时遇到问题 Using classic line chart if I would like to format my vertical axis with a dollar sign I would do vAxes
  • 需要一个正则表达式将 css 类添加到第一个和最后一个列表项

    更新 谢谢大家的意见 一些附加信息 它实际上只是我正在使用的一小部分标记 20 行 目的是利用正则表达式来完成工作 我还能够修改脚本 电子商务脚本 以在构建导航时插入类 我想限制我所采用的黑客数量 以便在更新到软件的最新版本时让事情变得更容
  • NodeJS 路由器负载太大

    我在 Nodejs 应用程序中创建休息端点 如下所示 在我的 server js 中 我有以下代码 var express require express var app express app use express json limit
  • 如何在 couchdb 视图中调用另一个视图?

    我刚刚读完 couchdb 权威指南 一书 并开始摆弄设计文档 然而有一件事我不明白 到目前为止我看到的所有例子都有些线性 Example id 1 rev name first something blue child 2 id 2 re
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • 如何在没有 jQuery 或延迟加载的情况下推迟背景图像

    根据帕特里克 塞克斯顿tutorial https varvy com pagespeed defer images html 我想以与这里相同的方式推迟背景图像img img src data image png base64 R0lGO
  • 使用mysql数据按高低价格排序

    这是我所拥有的以及我想做的 我的 MySql 数据库中有 12 个项目 4 个产品为 4 99 4 个产品为 3 99 4 个产品为 2 99 我意识到我可以像这样查询数据库 它会给我一个该价格的产品列表
  • 为什么 WebView 中的 dataWithPDFInsideRect 不能在 Mavericks 上创建高质量的 PDF?

    Run 示例项目 https github com tvarghese TestWebView并观察桌面上生成的输出 PDF 名为保存网页 pdf 粘贴感兴趣的代码片段 NSURL url NSBundle mainBundle URLFo
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 将 JSON 数组转换为 bash 数组并保留空格

    我想将 JSON 文件转换为 bash 字符串数组 稍后我可以对其进行迭代 我的JSON结构如下 USERID TMCCP CREATED DATE 31 01 2020 17 52 USERID TMCCP CREATED DATE 31
  • 使用 NodeJS 创建 YouTube 播放列表

    我正在尝试使用 NodeJS 服务器创建 YouTube 播放列表 我已按照 Oauth 的 NodeJS 快速入门说明进行操作 如以下链接所示 https github com youtube api samples blob maste
  • 单击 html 中的按钮后如何从 javascript 函数写入文件

    我正在尝试编写真正基本的代码 在 html 文件上按下按钮后 通过 JavaScript 函数在本地写入 txt 文件 这不可能吗 我可以仅使用 javascript 文件写入文件 但在尝试同时使用两者时则不能
  • 防止语言环境文件中的 HTML 字符实体被 Rails3 xss 保护破坏

    我们正在构建一个应用程序 这是我们第一个使用 Rails 3 的应用程序 并且我们必须从一开始就构建 I18n 作为完美主义者 我们希望在我们的视图中使用真正的排版 破折号 卷曲引号 省略号等 这意味着在我们的 locales xx yml
  • JS - 如何将图像对象变成灰度并显示它

    基本上 当单击按钮时 它会告诉移动设备转到相机 一旦相机拍照 它就会给我图像数据 它被称为数据 URL 吗 这是我处理它的代码 var imagesrc data image jpeg base64 imageData var myimag
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • javascript 加壳器与压缩器

    我想知道加壳器与压缩器的区别 优点是什么 即您应该在网络应用程序中部署压缩版本还是压缩版本 示例代码 var layout NAVVISIBLE 1 Init function this Resize Dimensions function
  • 数组长度未定义[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图按如
  • 如何向 SvelteKit/Vite 应用添加版本号?

    我正在尝试在我的 SvelteKit 应用程序中创建一个系统 它会在某个页面上向您显示有关当前应用程序版本的信息 最好是 Git 提交哈希和描述 我尝试使用Vite的定义功能 https vitejs dev config define在构

随机推荐

  • 隐藏用于 editText 焦点/触摸的软键盘

    我试图隐藏软键盘 使其在 EditText 接收焦点或触摸事件时不显示 我希望 EditText 是可编辑的 EditText 中会有文本 因此我希望 EditText 响应触摸事件 以便定位光标 但我将有专用的编辑按钮 而不是使用软键盘
  • 使用 Jasmine 测试时,Angularjs 注入控制器为空

    我目前正在与Angular 以及使用 Karma 和 Jasmine进行测试 例如 过滤器被注入到主模块中 并且可以毫无问题地进行测试 但是当我尝试测试控制器时 我得到了一个空物体注射后 这是我的主模块的代码 function use st
  • 具有固定滚动行和固定滚动列的大型动态大小 html 表格

    我需要在网页上显示一个大表格 并且需要防止第一列和第一行滚动 我想动态设置此表的垂直大小 在某些静态大小的页眉 页脚页面内容之间 以使其尽可能高 而不强制浏览器窗口具有垂直滚动条 browser window fixed static we
  • SwiftUI 安排本地通知没有按钮?

    这可能有一个非常简单的答案 因为我对 Swift 和 SwiftUI 还很陌生 并且刚刚开始学习 我正在尝试安排每天在特定时间重复的本地通知 但仅在选择切换时才执行此操作 因此 如果变量为真 我希望安排该通知 我在网上看了一些教程 比如这个
  • POST 字典为 JSON

    我需要将字典中的一些字段 来自 VB Net 应用程序 以 JSON 格式发送到 Web 服务 下面是代码 Dim dict As New Dictionary Of String String dict Add Drinks 2 dict
  • Fortran 中是否可以将零值变量输出为空白?

    我想在格式化文件中输出实际变量 如果变量非零 则使用格式语句 但如果变量为零 则仅输出空格 类似于 Iw 0 的做法 是否可以在格式语句中执行此操作 谢谢 不 不是使用格式语句 但是通过将值写入字符串并进行处理 这相当容易做到 下面是一个演
  • 如何制作一个极其广泛的情节

    我有一个包含 10000 个观察值的长时间序列 我想将其可视化 问题是 如果我只是正常地绘制它 时间维度将被压缩 并且我想要可视化的时间序列的任何细节都不会明显 例如 plot sin 1 10000 100 rnorm 10000 5 t
  • 具有私有 IP 的 Kubernetes 入口控制器

    是否可以在没有公共 IP 地址的情况下部署入口控制器 nginx Thanks 是否可以在没有公共 IP 地址的情况下部署入口控制器 nginx 毫无疑问 是的 如果 Ingress 控制器的Service is of type NodeP
  • 如何显示 url 中的图像?

    我有一个字符串变量tmpImgURLStr其中包含类似的 URLwww abc com img png 我想在我的 imageView 中显示该图像 因为我使用了一些代码 但它不起作用 如下所示 NSLog Img URL tmpImgUR
  • C++:按值将对象传递给同一类的成员函数

    我是 C 的初学者 刚刚开始学习 OOP 在下面的程序中 我添加了相同类的对象并显示了结果 但是 我无法理解这样一个事实 如果我按值将对象传递给函数 那么更改如何反映在调用函数中 这addNumbers 函数需要 Complex 类的两个对
  • 如何在test-cafe中使用数据发出post请求?

    我是 api 测试的初学者 我正在使用test cafe我已经写了测试来制作GET请求使用请求钩子工作正常 我能够获取数据 但是当我尝试制作时POST请求使用相同的请求钩子并且我在发出请求时无法发送数据 因为它需要是缓冲区类型 我无法将 J
  • 在 redux-observable 中编写和排序多个史诗

    我有一个问题不知道如何解决 我有两个史诗向 api 发出请求并更新商店 const mapSuccess actionType gt response gt type actionType SUCCESS payload response
  • 在单元测试中获取控制器的编译模板

    我有以下控制器 angular module app controller userList scope appRules function scope appRules scope isUserInRole function user r
  • 如何直接从 Rails 控制器返回 HTML?

    我的模型对象之一有一个 文本 列 其中包含网页的完整 HTML 我想编写一个控制器操作 它直接从控制器返回此 HTML 而不是像控制器上的其他操作一样通过 erb 模板传递它 我的第一个想法是将此操作放入一个新控制器中 并制作一个具有空布局
  • 带计数的堆叠条形图中 geom_text 的百分比

    我想要一个堆叠条形图 其中包含基于计数的百分比 我几乎达到了我想要的 但文本中的每个值都是 100 而不是真正的百分比 我认为我的代码中有一个小错误 但我找不到它 ggplot mtcars aes fill factor gear x f
  • 改进通过 JSON 将服务器数据库镜像到客户端数据库的过程?

    我有一个现成的适用于 iPad 的企业 非 AppStore 旧版 iOS 应用程序 我需要重构它 它是由另一位开发人员编写的 他是我当前工作的前任 该应用程序通过 JSON 从具有 MSSQL 数据库的服务器获取数据 数据库模式有大约 3
  • 交错?锁链?由一系列不同的delay()和duration()的d3转换寻址的单个DOM元素

    正如所解释的here http bost ocks org mike transition per element 您可以安排连续的转换驱动的属性值更改singleelement 使用transition transition 它创建一个新
  • 从另一个页面的代码隐藏中获取 ASP.Net 页面的 URL

    我试图从页面对象中找到确定页面 url 的方法 看来你只能获取当前上下文的路径 一个页面可以有多个 url 例如 我家里有一台服务器正在运行 并且该站点的 URL 根据我从何处查看而有所不同 当我在家时 我只使用内部服务器名称 这样流量就不
  • Java 9 中的 native2ascii 可执行文件发生了什么

    我正在尝试使用 java 9 编译我的应用程序 但它失败了 因为 native2ascii 可执行文件不存在 Java 9 中删除了吗 还有其他工具可以做同样的事情吗 是的 native2ascii 在 Java 9 中被删除了 错误报告以
  • 从 url 到 JSON 到 HTML

    我目前正在尝试学习 RESTful API 并将它们实现到用例中 我想做的一件事是将带有 json 有效负载的 url 从一台服务器加载到单独的 Web 服务器中 以在表上显示数据 我对此不太熟悉 所以我试图找到最好的方法来做到这一点 我正