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. 自定义Markdown例子

    主题1 正文字体 粗体 正文行内代码 斜体 int a = 2 /*代码块*/ /*杨韬的学习备忘录*/ private void CheckCloseFigure() { if (needClose ...

  2. 统计随机数及临界值Web Service接口

    (2017-02-04 银河统计) 统计函数API概念   API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发 ...

  3. phpstorm2018激活方法

    直接用浏览器打开 http://idea.lanyus.com/点击页面中的“获得注册码”,然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串如果提示红字体信息,那么先 ...

  4. 使用curl自动签到百度贴吧

    百度贴吧的一键签到接口地址为 http://tieba.baidu.com/tbmall/onekeySignin1 curl http://tieba.baidu.com/tbmall/onekey ...

  5. UI自动化(十一)selenium框架

    框架(提供一个好的解决方案给其他人用) webUi自动化框架 弊端:代码维护难,定位问题复杂,稳定性 PageObject分层:将一个页面抽象成一个类,将这个页面下的可操作性的功能点,当做这个类下的函 ...

  6. 剑指offer(50)数组中重复的数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  7. AndroBench手机性能测试【转】

    本文转载自:https://www.cnblogs.com/jiangzhishan/archive/2018/07/16/9316279.html AndroBench是一个基准测试应用程序,可以衡 ...

  8. P3181 [HAOI2016]找相同字符

    思路 广义SAM 把两个字符串建成广义SAM,然后统计两个SAM中相同节点的endpos大小乘积即可 记得开long long 代码 #include <cstdio> #include ...

  9. 关于MVC RouteExistingFiles疑问后续

    前两天写了<关于MVC RouteExistingFiles疑问>,本来希望寻求大佬快速解答,奈何无人问津. 只能查看.NET 源代码,可以使用反编译工具(我用IL spy),也可以在线查 ...

  10. vue--使用vue-cli构建项目

    webpack是现在较流行的前端自动化工具,该工具可以帮助开发者打包代码,以减少需要手动的工作,可以提高开发效率. vue中提供了一个脚手架工具vue-cli,这个工具已经将webpack配置好了,使 ...