<!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

     <meta name="viewport" content="width=device-width">

     <title>Fetch json example</title>

     <link rel="stylesheet" href="style.css">

     <!--[if lt IE 9]>

       <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

     <![endif]-->

   </head>

   <body>

     <h1>Fetch json example</h1>

     <ul>

     </ul>

   </body>

   <script>

     var myList = document.querySelector('ul');

     fetch('products.json')

     .then(function(response) {

       if (!response.ok) {

         throw new Error("HTTP error, status = " + response.status);

       }

       return response.json();

     })

     .then(function(json) {

       for(var i = 0; i < json.products.length; i++) {

         var listItem = document.createElement('li');

         listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong>';

         listItem.innerHTML +=' can be found in ' + json.products[i].Location + '.';

         listItem.innerHTML +=' Cost: <strong>£' + json.products[i].Price + '</strong>';

         myList.appendChild(listItem);

       }

     })

     .catch(function(error) {

       var p = document.createElement('p');

       p.appendChild(

         document.createTextNode('Error: ' + error.message)

       );

       document.body.insertBefore(p, myList);

     });

   </script>

 </html>
 { "products" : [

   { "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"},

   { "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"},

   { "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"},

   { "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"},

   { "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"},

   { "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"}

 ]}

，

Rewrite json的更多相关文章

  1. Rewrite JSON with Fetch

    1.重写json请求部分:HTML文件代码如下:<html>......<script> var myList = document.querySelector(‘ul‘); ...

  2. Rewrite JSON project with Fetch

    上传 JSON 数据 使用fetch()来发布json编码的数据. var url = 'https://example.com/profile'; var data = {username: 'ex ...

  3. Using Fetch to rewrite JSON

    截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. JsonCpp Documentation

    JsonCpp - JSON data format manipulation library JsonCpp Documentation 0.6.0-rc2 Introduction JSON (J ...

  5. Beetlex服务框架之Webapi访问限制和url重写

    在新版本的BeetleX.FastHttpApi中集成了IP访问策略和URL重写两个功能,通过IP访问策略可以制定服务针对不同IP的访问限制控制:而URL重写则可以制定更好的URL访问方式.以下介绍这 ...

  6. mac 教你如何在Mac上搭建自己的服务器——Nginx

    WHAT 本篇主要是基于Nginx在Mac上搭建自己的服务器. 我相信很多朋友肯定是第一次听到Nginx,关于它具有怎样的传奇,这儿肯定说不完也说不透. 有兴趣的朋友可以自行google或者baidu ...

  7. Nginx Rewrite规则

    location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这条规则将匹配 ...

  8. Atitit.实现反向代理(1)----url rewrite 配置and内容改写 and -绝对路径链接改写 java php

    Atitit.实现反向代理(1)----url rewrite  配置and内容改写 and -绝对路径链接改写 java php 1. 代理的实现:::普通代理and反向代理?? 1 2. url  ...

  9. [转]在SqlServer 中解析JSON数据

      在Sqlserver中可以直接处理Xml格式的数据,但因为项目需要所以要保存JSON格式的数据到Sqlserver中在博客:Consuming JSON Strings in SQL Server ...

随机推荐

  1. C++第三章复习与总结（思维导图分享）

    在完成了第三章的学习后,为了便于日后的复习整理,我制作了一张思维导图,有需要的可以自取. 函数的定义与使用 带默认值的函数 在C++中我们可以为函数添加默认的参数值,在调用时可不传入或部分传入参数,为 ...

  2. 剑指offer：链表中倒数第k个结点

    问题描述 输入一个链表,输出该链表中倒数第k个结点. 解题思路 两个指针都指向头结点,第一个指针先移动k-1个结点,之后两指针同时移动,当第一个指针到链表尾的时候,第二个指针刚好指向倒数第k个结点. ...

  3. Error: listen EADDRINUSE :::3000

    解释:端口已被占用 解决方法: 修改本服务要用的端口.如 3001 停止 3000 端口. lsof -i:3000 # 查看 3000 端口被占用情况 kill -9 xxx PID 为上调命令查看 ...

  4. Android 项目配置 gitlab-ci 持续集成

    一.项目根目录下创建一个 .gitlab-ci.yml 文件 然后在 .gitlab-ci.yml 中配置持续集成的脚本: 脚本配置详细可以看: Configuration of your jobs ...

  5. 第 9 章 数据管理 - 074 - 如何安装和配置 Rex-Ray？

    Rex-Ray 安装和配置方法 Rex-Ray 是一个优秀的 Docker volume driver 安装和配置方法 Rex-Ray 以 standalone 进程的方式运行在 Docker 主机上 ...

  6. Itext生成pdf文件

    来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...

  7. Amazon 刷单的几种方式及安全性？

    刷单需要注意的几个点 1.通过关键词,找产品.不要直接通过连接或者ASIN购买,容易被亚马逊监控. 2.添加购物车时最好添加同类产品表现好的三个到购物车,关联同类产品.在页面多浏览一下,多打开几个同类 ...

  8. 使用pyinstaller打包多个py文件为一个EXE文件

    1. 安装pyinstaller. pip install pyinstaller !!!!64位win7上打包后始终不能用,提示找不到ldap模块,换了32位win7就好了.!!!!(代码中涉及ld ...

  9. React文档（二十四）高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  10. LaLeX数学公式

    启用数学公式: 需要插入公式时,用 $ 将公式包围.若需要输入多行,则用一对 $$ 包围. 例如: $$ \rho = \sqrt{(\Delta x)^{2}+(\Delta y)^{2}} \\ ...