截图如下：

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. 在awk中通过system调用sql语句来说明引号的使用

    一个实际应用例子: 在awk中,通过system调用连接数据库并作select操作,select语句中where条件来自于一个文件(file)的第一个域($1). $ cat file ... ... ...

  2. Python3基础 yield 在函数中的用法示例

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

  3. fhq treap抄袭笔记

    目录 碎碎念 点一下 注意!!! 模板 fhq treap 碎碎念 我咋感觉合并这么像左偏树呢 ps:难道你们的treap都是小头堆的吗 fhq真的是神人 现在看以前学的splay是有点恶心,尤其是压 ...

  4. IntelliJ IDEA 在运行web项目时部署的位置

    在idea中运行tomcat,把项目部署到其中,运行起来,去tomcat目录下去看,根本找不到部署的项目,那么项目是怎么运行的? 在idea中配置的tomcat,在运行时idea不会把项目放到该路径下 ...

  5. IDEA，RubyMine等JetBrains系列软件通用破解教程

    此教程不光适用于IDEA,还可以在RubyMine等JetBrains系列软件使用,亲测可用. (1)下载安装你需要的JetBrains系列软件,安装完最好不要打开,直接finish,断开网络. (2 ...

  6. jquery 之$.fn的用法示例

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 若扩展$.fn.abc(),即$.fn.abc()是对jquery扩展一个abc的方法,那么每个jquer ...

  7. json获取元素数量

    var keleyijson={"plug1":"myslider","plug2":"zonemenu"} funct ...

  8. [Redis] - 高并发下Redis缓存穿透解决

    高并发情况下,可能都要访问数据库,因为同时访问的方法,这时需要加入同步锁,当其中一个缓存获取后,其它的就要通过缓存获取数据. 方法一: 在方法上加上同步锁 synchronized //加同步锁,解决 ...

  9. HDU 5936 Difference（折半搜索（中途相遇法））

    http://acm.hdu.edu.cn/showproblem.php?pid=5936 题意: 定义了这样一种算法,现在给出x和k的值,问有多少个y是符合条件的. 思路: y最多只有10位,再多 ...

  10. 51nod 1199 Money out of Thin Air（线段树+树剖分）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1199 题意: 思路:因为是一棵树,所以需要把它剖分一下再映射到线段树上, ...