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

     <link rel="stylesheet" href="style.css">

     <!--[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('products.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>
 { "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"}

 ]}

，

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. Using Fetch to rewrite JSON

    截图如下: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. JsonCpp Documentation

    JsonCpp - JSON data format manipulation library JsonCpp Documentation 0.6.0-rc2 Introduction JSON (J ...

  5. Beetlex服务框架之Webapi访问限制和url重写

    在新版本的BeetleX.FastHttpApi中集成了IP访问策略和URL重写两个功能,通过IP访问策略可以制定服务针对不同IP的访问限制控制:而URL重写则可以制定更好的URL访问方式.以下介绍这 ...

  6. mac 教你如何在Mac上搭建自己的服务器——Nginx

    WHAT 本篇主要是基于Nginx在Mac上搭建自己的服务器. 我相信很多朋友肯定是第一次听到Nginx,关于它具有怎样的传奇,这儿肯定说不完也说不透. 有兴趣的朋友可以自行google或者baidu ...

  7. Nginx Rewrite规则

    location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的地址都以 / 开头,所以这条规则将匹配 ...

  8. Atitit.实现反向代理(1)----url rewrite 配置and内容改写 and -绝对路径链接改写 java php

    Atitit.实现反向代理(1)----url rewrite  配置and内容改写 and -绝对路径链接改写 java php 1. 代理的实现:::普通代理and反向代理?? 1 2. url  ...

  9. [转]在SqlServer 中解析JSON数据

      在Sqlserver中可以直接处理Xml格式的数据,但因为项目需要所以要保存JSON格式的数据到Sqlserver中在博客:Consuming JSON Strings in SQL Server ...

随机推荐

  1. 支持向量机（Support Vector Machine）：超平面

    超平面 超平面是 $n$ 维空间的 $n-1$ 维子空间,类似二维空间的直线,三维空间的平面. 分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面,将不同类别的样本分开.以二维空间为例 ...

  2. DataTable2JSON 和 DataTable2Class 性能比较

    DataTable 用 5000行和50000行数据做测试,得出转class效率貌似高一点点,不过优化并不大,还是 sql ,网络请求方面做优化比较显著. jobject 2019-03-07 06: ...

  3. Vue开发与调试工具

    vscode: Visual Studio Code https://code.visualstudio.com/Download 可以下载各个版本的,Windows/ Debian /Mac 等 W ...

  4. The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration

    用过Mysql的人都知道,这个时区问题真个磨人的小妖精,哪天一忘记设置了就会出来磨磨你!!! 之前用的解决方法都是在Mysql的配置上添加与时区相关的配置,但是今天看到一篇博客:https://blo ...

  5. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  6. SSM框架完成Ajax简单用户登录验证

    一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  7. css实现垂直水平居中的方法（个数不限）？

    方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...

  8. Django-models & QuerySet API

    django中配置mysql数据库 1,首先配置settings.py. 一是在INSTALLED_APPS里面加入app名称: 二是配置数据库相关信息 INSTALLED_APPS = [ 'dja ...

  9. Windos消息驱动

    当Window是向程序发送消息时,它调用程序中的一个函数,这个函数用来描述Windows发送的消息,成为窗口函数或消息处理函数.他是一个自定义的回调函数: LRESULT CALLBACK Windo ...

  10. ASP.NET上传大文件报错，IIS7.0

    打开你系统盘(我是C盘),找到C:\Windows\System32\inetsrv\config\schema目录,该目录下有一个IIS_schema.xml,右击打开文件,Ctrl+F,然后输入& ...