第一个json解析：ps：（内容待完善）

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>WeCome BOOKS</title>
   
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="1.js">
   
  
  </head>

  <body>

      <header>


      </header>

      <section>

      </section>

    <script src="2.js">
   
    </script>
  </body>
</html>

 var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL ='https://gist.githubusercontent.com/HL345/7774958ea5a7dcf1d03f625067e701f5/raw/620cd977a101a3e6b2a6a87b8848a21a4a00feef/2.json';
    var request = new XMLHttpRequest();//API接口
    request.open('GET', requestURL);//获取URL中的内容
    request.responseType = 'json';
    request.send();
request.onload = function() {
  var Book = request.response;//superheroes 变量作用于函数中
  populateHeader(Book);//前面无对象所以是函数/将superheros的内容填写到header中
  showHeroes(Book);//
}
function populateHeader(jsonObj) { //自定义populateheader函数
  var myH1 = document.createElement('h1');//创建h1元素并将给myH1赋值
  myH1.textContent = jsonObj['booksName'];
  header.appendChild(myH1);//将myh1节点添加到header节点后
}
function showHeroes(jsonObj) {
  var book = jsonObj['members'];    
  for (var i = 0; i < book.length; i++) {
    var myArticle = document.createElement('article');
    var myH2 = document.createElement('h2');
    var myH3=document.createElement('h3');
    var myList = document.createElement('ul');

    myH2.textContent = book[i].name;
    myH3.textContent=book[i].type;

    myArticle.appendChild(myH2);
    myArticle.appendChild(myH3);

    section.appendChild(myArticle);
  }
}

/* || 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;
}

相关阅读:
hdu 4358 Boring counting 夜
流式读取文件
文件夹操作
通过 fs 模块创建下列文件结构练习
如何判断一个路径是否为文件夹
文件读取
写入流写入文件
文件简单写入
移动并重名文件，删除文件
__dirname绝对路径

原文地址：https://www.cnblogs.com/HL345/p/9980294.html