截图如下：

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. python程序转为exe文件

    python开发者向普通windows用户分享程序,要给程序加图形化的界面(传送门:这可能是最好玩的python GUI入门实例! http://www.jianshu.com/p/8abcf73ad ...

  2. Python3基础 else 循环完整结束才执行

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Java中线程出现Exception in thread "Thread-0" java.lang.IllegalMonitorStateException异常 解决方法

    代码 package thread; public class TestChongNeng { public static void main(String[] args) { Thread t1 = ...

  4. spring注解没起作用

    本文为博主原创,未经允许,不得转载: 今天在写一个功能的时候,用的是springMVC的注解,当整个的功能写完在调试的时候, 从浏览器请求一直请求不到,仔细检查代码的时候也没检查出逻辑的问题,关键的问 ...

  5. 【TCP/IP详解 卷一：协议】第二十四章 TCP的未来与性能

    来到了TCP的最后一个章节,未来与性能.在当时(1991年)的未来,如今已经部分变为现实,部分就只是历史中的实验. 主要内容: 路径MTU的发现与TCP的结合. 长肥管道 和 高速千兆比网络. 窗口扩 ...

  6. Ubuntu 12.04 安装JDK

    为了在Ubuntu上安装好eclipse,按照步骤先进行JDK的安装. (1) 新建java文件夹 命令行操作: (2) 下载解压JDK安装包后无法移动文件夹至File System 移动时提示:Pe ...

  7. HDU 6129 Just do it（杨辉三角）

    http://acm.hdu.edu.cn/showproblem.php?pid=6129 题意: 给出数组a,并且bi=a1^a2^a3...^ai,并且现在会重复m次,求出最后的b数组. 思路: ...

  8. Linux——软件包简单学习笔记

    Linux中的是那种软件包:  (这里学习是基于redHat的Cent-OS) 1: 二进制软件包管理(RPM.YUM) 2:源代码包安装 3: 脚本安装(Shell或Java脚本) 一: 二进制软件 ...

  9. [ios]安装CocoaPods及使用详解

    最新 macOS Sierra 10.12.3 安装CocoaPods及使用详解 http://www.jianshu.com/p/b64b4fd08d3c CocoaPods的安装以及遇到的坑 ht ...

  10. 小橙书阅读指南（十三）——连通性算法（union-find）

    上一章我大概说明了什么是图论以及无向图的基础概念,本章我们要研究一种更普遍的算法——连通性算法.它属于图论的分支,也是一种抽象算法.在深入算法之前,我们先提出一个具体的问题:假设在空间中存在N个点,我 ...