heroes.html
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Our superheroes</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">

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

  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>

    var header = document.querySelector('header');

    var section = document.querySelector('section');

    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

    var request = new XMLHttpRequest();

    request.open('GET', requestURL);

    request.responseType = 'json';

    request.send();

    request.onload = function() {

      var superHeroes = request.response;

      populateHeader(superHeroes);

      showHeroes(superHeroes);

    }

    function populateHeader(jsonObj) {

      var myH1 = document.createElement('h1');

      myH1.textContent = jsonObj['squadName'];

      header.appendChild(myH1);

      var myPara = document.createElement('p');

      myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];

      header.appendChild(myPara);

    }

    function showHeroes(jsonObj) {

      var heroes = jsonObj['members'];

      for(var i = 0; i < heroes.length; i++) {

        var myArticle = document.createElement('article');

        var myH2 = document.createElement('h2');

        var myPara1 = document.createElement('p');

        var myPara2 = document.createElement('p');

        var myPara3 = document.createElement('p');

        var myList = document.createElement('ul');

        myH2.textContent = heroes[i].name;

        myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;

        myPara2.textContent = 'Age: ' + heroes[i].age;

        myPara3.textContent = 'Superpowers:';

        var superPowers = heroes[i].powers;

        for(var j = 0; j < superPowers.length; j++) {

          var listItem = document.createElement('li');

          listItem.textContent = superPowers[j];

          myList.appendChild(listItem);

        }

        myArticle.appendChild(myH2);

        myArticle.appendChild(myPara1);

        myArticle.appendChild(myPara2);

        myArticle.appendChild(myPara3);

        myArticle.appendChild(myList);

        section.appendChild(myArticle);

      }

    }

    </script>

  </body>

</html>
style.css
/* || general styles */

html {

  font-family: 'helvetica neue', helvetica, arial, sans-serif;

}

body {

  width: 800px;

  margin: 0 auto;

}

h1, h2 {

  font-family: 'Faster One', cursive;

}

/* header styles */

h1 {

  font-size: 4rem;

  text-align: center;

}

header p {

  font-size: 1.3rem;

  font-weight: bold;

  text-align: center;

}

/* section styles */

section article {

  width: 33%;

  float: left;

}

section p {

  margin: 5px 0;

}

section ul {

  margin-top: 0;

}

h2 {

  font-size: 2.5rem;

  letter-spacing: -5px;

  margin-bottom: 10px;

}

A JSON example的更多相关文章

  1. 使用TSQL查询和更新 JSON 数据

    JSON是一个非常流行的,用于数据交换的文本数据(textual data)格式,主要用于Web和移动应用程序中.JSON 使用“键/值对”(Key:Value pair)存储数据,能够表示嵌套键值对 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  4. Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  5. .NET Core系列 ： 2 、project.json 这葫芦里卖的什么药

    .NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...

  6. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  8. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  9. .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator

    去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...

  10. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

随机推荐

  1. sublime-text3按tab跳出括号

    功能 通过按tab自动跳过右括号,右引号,虽然也可以按右方向键,但离得太远按起来太麻烦 在首选项->按键绑定里添加: { "keys": ["tab"], ...

  2. InternalError (see above for traceback): Blas GEMV launch failed: m=1, n=100

    python tensorflow 运行提示错误:InternalError (see above for traceback): Blas GEMV launch failed:  m=1, n=1 ...

  3. c#中退出WinForm程序包括有很多方法，如:this.Close(); Application.Exit();Application.ExitThread(); System.Environment.Exit(0);

    本文实例总结了C#中WinForm程序退出方法技巧.分享给大家供大家参考.具体分析如下: 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit ...

  4. 51Nod 1058 N的阶乘的长度

    输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3.   Input 输入N(1 <= N <= 10^6) Output 输出N的阶乘的长度 Input示例 6 Out ...

  5. P2472 [SCOI2007]蜥蜴（网络流）

    P2472 [SCOI2007]蜥蜴 把每个点拆成2个点,两点之间连边的边权为石柱高度 新建虚拟源点$S$和汇点$T$ $S$向所有有蜥蜴的点连边,边权1 其他边都连$inf$ 剩下就是裸的$dini ...

  6. listview控件的使用

    listview控件是用于实现向上下两个方向翻动的界面(类似于QQ音乐查找歌手时的哪个界面),但是listview只是提供了一个空架子并没有什么实质的东西,那么这些东西要从哪里获得呢,那就要用到适配器 ...

  7. 【新特性】JDK1.5

    一.自动装箱与拆箱: 自动装箱的过程:每当需要一种类型的对象时,这种基本类型就自动地封装到与它相同类型的包装中. 自动拆箱的过程:每当需要一个值时,被装箱对象中的值就被自动地提取出来,没必要再去调用i ...

  8. grade配置添加java库导致报 java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMerger

    原因是导入的第三方库中也引入了项目中存在的相同名称的库,导致产生冲突

  9. Unity --- OnValidate 和 ExecuteInEditMode

    using UnityEngine; [ExecuteInEditMode] //添加脚本.启动.Stop的时候执行Awake() Start() public class test : MonoBe ...

  10. 一、Beego介绍与项目创建及启动

    一.beego 简介 beego 是一个快速开发 Go 应用的 HTTP 框架,他可以用来快速开发 API.Web 及后端服务等各种应用,是一个 RESTful 的框架,主要设计灵感来源于 torna ...