截图如下：

html代码如下：

 <!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>

 <style type="text/css">

 html {

   font-family: sans-serif;

 }

 ul {

   list-style-type: none;

   display: flex;

   flex-flow: column;

   align-items: flex-start;

 }

 li {

   margin-bottom: 10px;

   background-color: pink;

   font-size: 150%;

   border-top: 3px solid pink;

   border-bottom: 3px solid pink;

   box-shadow: 5px 5px 5px rgba(0,0,0,0.7);

 }

 strong {

   background-color: purple;

   color: white;

   padding: 0 8px;

   border-top: 3px solid purple;

   border-bottom: 3px solid purple;

   text-shadow: 2px 2px 1px black;

 }

 </style>

     <!--[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('https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.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>

json文件如下：https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.json

 { "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"}

 ]}

Using Fetch to 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. Rewrite json

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  5. react之fetch请求json数据

    Fetch下载 npm install whatwg-fetch -S Fetch请求json数据 json文件要放在public内部才能被检索到

  6. react 项目实战（二）创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000

    1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...

  7. [Angular-Scaled Web] 8. Using $http to load JSON data

    Using the $http service to make requests to remote servers. categories-model.js: angular.module('egg ...

  8. 你不需要jQuery(三)：新AJAX方法fetch()

    XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...

  9. 腾讯IVWEB团队：前端 fetch 通信

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:villainthr 文章摘自: 前端小吉米 随着前端异步的发展, XHR 这种耦合方式的书写不利于前端 ...

随机推荐

  1. VC 线程池

    参照:http://www.cnblogs.com/kzloser/archive/2013/03/11/2909221.html 参照:http://blog.csdn.net/pjchen/art ...

  2. Python 逗号的几种作用

    转自http://blog.csdn.net/liuzx32/article/details/7831247 最近研究Python  遇到个逗号的问题 一直没弄明白 今天总算搞清楚了 1.逗号在参数传 ...

  3. ASCII 、UTF-8、Unicode都是个啥啊，为啥会乱码啊？

    因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255(二进制1111 ...

  4. H5本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  5. Linux——用户管理简单学习笔记（二）

    其实如果我们了解了Linux中用户管理的配置文件之后,完全可以手工管理用户: 添加用户: useradd 设置选项 用户名 -D 查看缺省参数 u:UID g:缺省所属用户组GID G:指定用户所属多 ...

  6. Python代码规范与命名规则

    1.模块 模块尽量使用小写命名,首字母保持小写,尽量不要用下划线(除非多个单词,且数量不多的情况) # 正确的模块名 import decoder import html_parser # 不推荐的模 ...

  7. python ros 重新设置机器人的位置

    #!/usr/bin/env python import rospy import math from tf import transformations from geometry_msgs.msg ...

  8. Python 获取文件的创建时间，修改时间和访问时间

    # 用到的知识# os.path.getatime(file) 输出文件访问时间# os.path.getctime(file) 输出文件的创建时间# os.path.getmtime(file) 输 ...

  9. python排序（插入排序） 从小到大顺序

    def insert_sort(ilist): for i in range(len(ilist)): for j in range(i): if ilist[i] < ilist[j]: il ...

  10. Linux 安装iostat命令

    首先跟你的Linux系统有关 我用的是Red hat系统 记录下最快的安装iostat命令的方式 起初想查看iostat, 提示 iostat: command not found 于是,通过yum ...