截图如下：

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. Git 基础笔记整理1

    Git 官网:http://git-scm.com/ git教程1:http://www.yiibai.com/git/home.html git教程2 :http://www.liaoxuefeng ...

  2. aws相关文档

    使用 IAM 角色授予对 Amazon EC2 上的 AWS 资源的访问权 https://docs.aws.amazon.com/zh_cn/sdk-for-java/v1/developer-gu ...

  3. （转）Spring Boot（一）

    (二期)4.springboot的综合讲解 [课程四]springbo...概念.xmind64.5KB [课程四]spring装配方式.xmind0.2MB [课程四预习]spri...解读.xmi ...

  4. Unity3D学习笔记（二十三）：事件接口、虚拟摇杆、层级管理和背包系统

    事件接口 IDragHandler(常用):鼠标按下拖动时执行(只要鼠标在拖动就一直执行) IDropHandler:对象拖动结束时,如果鼠标在物体的范围内,执行一次(依赖于IDragHandler存 ...

  5. C#学习笔记（十六）：索引器和重载运算符

    二维数组如何映射到一维数组 重载运算符 1.算术运算符 2.关系运算符, < 和 > 成对重载 using System; using System.Collections.Generic ...

  6. HDU 1757 A Simple Math Problem（矩阵快速幂模板）

    题意:题意很简单,不多说了. 思路: |f(10) |       |a0 a1 a2 ...a8 a9|    |f(9)|| f(9)  |       | 1   0   0 ... 0     ...

  7. python 正则表达式匹配特定浮点数

    def is_decimal(num): import re #以数字开头,小数点后保留1位数字或两位数字或者没有小数部分 dnumre = re.compile(r""" ...

  8. MSVC_代码优化

    测试环境: Win7x64 cn_visual_studio_2010_ultimate_x86_dvd_532347.iso qt-opensource-windows-x86-msvc2010_o ...

  9. Qt5_qt.conf

    本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原 文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作. 原文链接:用qt.conf和qtconfig ...

  10. ninja install error

    ninja install ...... CMake Error at cmake_install.cmake:36 (FILE):  file INSTALL cannot find  " ...