截图如下：

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. JS(JavaScript)脚本库的积累

    在现在互联网盛行的时代,使得B/S架构飞速发展.曾经在大学的时候我一直都梦想着毕业后要找一个像腾讯这样大企业做C/S方面的开发工作(其实现在腾讯也有很多B/S软件),因为C/S体验度非常高,感觉非常好 ...

  2. python学习笔记比较全

    注:本笔记基于python2.6而编辑,尽量的偏向3.x的语法 Python的特色 1.简单 2.易学 3.免费.开源 4.高层语言: 封装内存管理等 5.可移植性: 程序如果避免使用依赖于系统的特性 ...

  3. git commit如何修改默认编辑器为vim

    答:修改~/.gitconfig(修改这个文件将全局有效)或项目目录中的.git/config(修改此文件只是使当前项目默认使用vim)中增加以下内容: [core] editor=vim

  4. ubuntu下交叉编译ffmpeg

    环境:ubuntu16.04 交叉编译器版本:4.8.3 依赖x264,lame x264: 1.wget ftp://ftp.videolan.org/pub/x264/snapshots/last ...

  5. Death to Binary? （模拟）题解

    思路: 除去前导0,注意两个1不能相邻(11->100),注意 0 *** 或者*** 0或者0 0情况 用string的reverse()很舒服 代码: #include<cstdio& ...

  6. Python 逗号的几种作用

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

  7. [echats] - EChats图表的使用

    从上图可以看到,信息是能被抽象化为图形展示的,也就是基本的图表,曲线(想想股票那种曲线,普及一下那个叫K线图,想起当初去北京面试炒股公司的时候了...),柱状图等. 而apache开源的echats正 ...

  8. HDU 6143 Killer Names（容斥原理）

    http://acm.hdu.edu.cn/showproblem.php?pid=6143 题意: 用m个字母去取名字,名字分为前后两部分,各由n个字符组成,前后两部分不能出现相同字符,问合法的组成 ...

  9. UVa 11212 编辑书稿（dfs+IDA*）

    https://vjudge.net/problem/UVA-11212 题意:给出n个自然段组成的文章,将他们排列成1,2...,n.每次只能剪切一段连续的自然段,粘贴时按照顺序粘贴. 思路:状态空 ...

  10. Linux——系统引导流程学习简单笔记

    开启电源: 固件 firmware(CMOS/BIOS) → POST 加电自检 对硬件就行检查 ↓ 自举程序 BootLoader(GRUB) → 载入内核 ↓ 载入内核 Kernel 1:驱动硬件 ...