JavaScript读取JSON文件

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。有关于json的相关信息，可参考：json百度百科。

1、HTML文档

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Read Json File</title><link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"><link rel="stylesheet" href="css/style.css">
</head>
<body><header></header><section></section><script src="js/readJSON.js"></script>
</body>
</html>

2、js文档：readJSON.js

    //获取<header>和</section>的引用let header = document.querySelector('header');let section = document.querySelector('section');//保存一个json文件访问的URL作为一个变量let requestURL = 'json/superheroes.json';//创建一个HTTP请求对象let request = new XMLHttpRequest();//使用open（）打开一个新请求request.open('GET', requestURL);//设置XHR访问JSON格式数据，然后发送请求// request.responseType = 'json';//设置XHR访问text格式数据request.responseType = 'text';request.send();//处理来自服务器的数据request.onload = function() {let superHeroesText = request.response;let superHeroes = JSON.parse(superHeroesText);// let superHeroes = request.response;populateHeader(superHeroes);showHeroes(superHeroes);};//对header进行定位function populateHeader(jsonObj) {let myH1 = document.createElement('h1');myH1.textContent = jsonObj['squadName'];header.appendChild(myH1);let myPara = document.createElement('p');myPara.textContent = 'Hometown: ' + jsonObj['hometown'] + ' //Formed: ' + jsonObj['formed'];header.appendChild(myPara);}function showHeroes(jsonObj) {//用heroers存储json文件里menbers的信息let heroes = jsonObj['members'];for (let i = 0; i < heroes.length; i++) {//创建一系列页面元素let myArticle = document.createElement('article');let myH2 = document.createElement('h2');let myPara1 = document.createElement('p');let myPara2 = document.createElement('p');let myPara3 = document.createElement('p');let 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:';let superPowers = heroes[i].powers;for(let j = 0; j < superPowers.length; j++) {let 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);}}

3、CSS文档：readJSONStyle.css

html, body {margin: 0;
}html {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;height: 100%;
}body {overflow: hidden;height: inherit;
}h1 {font-size: 2rem;letter-spacing: -1px;position: absolute;margin: 0;top: -4px;right: 5px;color: transparent;text-shadow: 0 0 4px white;
}

4、json文件：heros.json

{"squadName" : "Super hero squad","homeTown" : "Metro City","formed" : 2016,"secretBase" : "Super tower","active" : true,"members" : [{"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" : ["Radiation resistance","Turning tiny","Radiation blast"]},{"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]},{"name" : "Eternal Flame","age" : 1000000,"secretIdentity" : "Unknown","powers" : ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]
}

实现效果：

JavaScript读取JSON文件相关推荐

新手如何使用JavaScript读取json文件 v2.0
前言 3年前,我在纯小白时期写的一篇文章:新手如何使用JavaScript读取json文件至今仍时常有小伙伴点击. 如今自己在此知识领域已经有所成长,故重写一篇更高质量,更有帮助的文章,希望更有效的 ...
《机器学习与数据科学（基于R的统计学习方法）》——2.8　读取JSON文件
本节书摘来异步社区<机器学习与数据科学(基于R的统计学习方法)>一书中的第2章,第2.8节,作者:[美]Daniel D. Gutierrez(古铁雷斯),更多章节内容可以访问云栖社区&q ...
本地服务器json文件,从本地ftp服务器读取Json文件
我是存储在本地服务器中的名为File1.js的json文件.我想读取json文件的内容,并希望在其他文件中显示数据.我已经尝试使用JavaScript编码,但它不能正常工作.从本地ftp服务器读取Js ...
Java 读取 JSON 文件转成 Map 对象
Java 读取 JSON 文件转成 Map 对象应用场景待读取的外部 JSON 文件 Java 代码读取结果 Gson 应用场景 Jar 包或 War 包引用一个外部文件作为项目运行的配置文件 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
R读取json文件并转化为dataframe
R读取json文件并转化为dataframe 目录 R读取json文件并转化为dataframe R读取json文件把json转为dataframe
cocos2d-x之读取json文件
cocos2d-x之读取json文件在resource文件夹下,添加data.json文件新建->Other->empty->open 就新建一个json文件了, data.js ...
javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
python读取json配置文件_Python简单读取json文件功能示例
本文实例讲述了Python简单读取json文件功能.分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace" ...
java spark 读取json_apache-spark - 与aws-java-sdk链接时，在读取json文件时发生Spark崩溃 - 堆栈内存溢出...
让config.json成为一个小的json文件: { "toto": 1 } 我做了一个简单的代码,用sc.textFile读取json文件(因为文件可以在S3,本地或HDFS上 ...

JavaScript读取JSON文件

JavaScript读取JSON文件相关推荐

最新文章

热门文章