<!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. StringBuffer的delete方法与deleteCharAt方法的区别。

    delete方法与deleteCharAt两个方法都是用来删除StringBuffer字符串指定索引字符的方法, delete(int  begin,int  end)有两个参数,使用时删除索引从be ...

  2. 2019金融科技风往哪儿吹？蚂蚁金服联合20余家金融机构预测新年热点：5G、区块链上榜

    2019年,金融科技的风向标在哪里?哪些板块成新宠,哪些科技成潮流? 1月4日,蚂蚁金服ATEC城市峰会在上海举行.大会上,蚂蚁金服与20余家金融机构一起预测了2019年金融科技的发展. “未来金融会 ...

  3. Codeforces 396 E. Valera and Queries

    题目链接:http://codeforces.com/problemset/problem/369/E 考虑将问题转化为有多少条线段没有覆盖这些点,如果一个询问的点集是${[x1,x2,...,xn] ...

  4. 集训队日常训练20181201 C 1003 : 种类数

    时间限制(普通/Java):2000MS/6000MS     内存限制:65536KByte总提交: 8            测试通过:5 描述 一共有 n个数,第 i 个数是 xi ,其中xi  ...

  5. Python入门（二）列表、字典、字符串、元组、集合

    列表list什么是列表:Python内置的一种数据类型是列表,list是一种有序的集合,可以随时添加和删除其中的元素 创建List列表的方法 L = ['杨俊辰',‘啦啦啦’,'Tom'] empty ...

  6. RxJava2

    原文地址 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) 这可能是最好的RxJava 2.x 入门教程(三) 这可能是最好的RxJava 2.x ...

  7. Oracle解决ora-01653 无法通过1024扩展

    综合上述检查结果,可断定遇到的问题是因为可能性1—表空间不足导致.解决办法也就是扩大表空间 扩大表空间的四种方法: 1.增加数据文件 ALTER TABLESPACE ***_TRD ADD DATA ...

  8. AutoField的话就报错：'AutoField' object has no attribute 'rel'

    def data_inspect(self, data, extra=None): if isinstance(data, (QuerySet, Page, list)): convert_data ...

  9. java既然存在gc线程，为什么还存在内存泄漏？

    java既然存在gc线程,为什么还存在内存泄漏? 1.既然 Java 的垃圾回收机制能够自动的回收内存,怎么还会出现内存泄漏的情况呢?这个问题,我们需要知道 GC 在什么时候回收内存对象,什么样的内存 ...

  10. url路由配置以及渲染方式

    路由分配及模板渲染 路由系统 urlpatterns = [ path('admin/', admin.site.urls), path('teacher/',include('teacher.url ...