前端 DOM 解析json格式数据

我的json文件放在github的仓库里。

json文件

{
"major":
[
{
  "name":"纪伯伦全集 ",
  "author":" [黎巴嫩] 纪伯伦 ",
  "intro":"这套全集收入了纪伯伦的全部小说、诗歌、散文和绘画作品。纪伯伦·哈利勒·纪伯伦是阿拉伯著名的作家、诗人、艺术家。纪伯伦创作的全部作品，充满了对祖国、对人民和对未来的爱，以画笔和文笔为武器同旧世界进行了顽强的斗争，保护了受压迫最深的阿拉伯妇女，捍卫了她们的自由恋爱的权利。",
  "price":"$100"
},
{
  "name":"唐诗宋词",
  "author":"宋涛",
  "intro":"唐诗宋词是中国文学史上的两颗明珠，唐代被称为诗的时代，宋代被称为词的时代。在中华文明灿烂的长卷中，唐诗宋词是其中最为绚丽的华章。词源于民间，始于唐，兴于五代，盛于两宋。",
  "price":"$150"
},
{
  "name":"嫌疑人X的献身",
  "author":"东野圭吾",
  "intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
  "price":"$73"
}
],
"hot":
[
{
  "name":"嫌疑人X的献身",
  "author":"东野圭吾",
  "intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
  "price":"$73",
  "number":"10815014"
},
{
  "name":"恶意",
  "author":"东野圭吾",
  "intro":"《恶意》是日本作家东野圭吾挑战悬疑小说写作极限的佳作，是以加贺恭一郎为主人公的系列作品的第四部，该系列的上一部作品是《谁杀了她》，该系列的下一部作品是《我杀了他》。",
  "price":"$53",
  "number":"5156552"
},
{
  "name":"我不",
  "author":"大冰",
  "intro":"《我不》——百万级畅销书作家大冰2017年新书。这本书是一本在北冰洋开笔的故事集，故事中的人物全都是真实存在的，他们因为各种交集而和大冰遇见，相识于微，因为故事成为了没有血缘关系的家人，相识之地，成为了不是家乡的故乡。他们的故事不虚构，不矫情，不鸡汤，只是把多年积淀的故事娓娓道来。",
  "price":"$123",
  "number":"87185425"
}
],
"new":
[
{
  "name":"好好说话. 2简单有效的高情商沟通术",
     "author":"马薇薇、黄执中、周玄毅、邱晨、胡渐彪",
     "price":"$50",
     "time":"2018-10-01"
    },
    {
  "name":"人生难得是心安",
     "author":"呂克·费希",
     "price":"$50",
     "time":"2016-03-01"
    },
    {
  "name":"实用折纸大全",
     "author":"犀文图书",
     "price":"$60",
     "time":"2014-04-01"
    },
    {
  "name":"绿山墙的安妮",
     "author":"露西·莫德·蒙格马利",
     "price":"$160",
     "time":"2011-5-1"
    },
    {
  "name":"活着",
     "author":"余华",
     "price":"$40",
     "time":"1993-03-01"
    },
    {
  "name":"幼儿故事绘本",
     "author":"犀文图书",
     "price":"$130",
     "time":"2018-04-06"
    }
],

"discount":
[
{
  "name":"新华字典",
  "author":"",
  "Oprice":"100",
  "price":"79"
},
  {
  "name":"湘军史",
  "author":"",
  "Oprice":"99",
  "price":"49"
},
  {
  "name":"",
  "author":"",
  "Oprice":"",
  "price":""
}

]
}

-------------------------------------------------------------------------------------------------------------------------

html文件

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
<meta charset="utf-8">
</head>
<body>
<table>
  <tr>
   <td>

    <a href="">
     <img src="../scr/book1.jpg">

//创建需要插入json数据的列表
        <ul>
        <li id="b1_l1">
        </li>
        <li id="b1_l2">
        </li>
        <li id="b1_l3"></li>
        </ul>

       </a>
   </td>
   <td>

    <a href="">
    <img src="../scr/book2.jpg">
      <ul>
        <li id="b2_l1">
        </li>
        <li id="b2_l2">
        </li>
        <li id="b2_l3"></li>
        </ul>

       </a>
   </td>
   <td>

    <a href="">
  <img src="../scr/book3.jpg">
      <ul>
        <li id="b3_l1">
        </li>
        <li id="b3_l2">
        </li>
        <li id="b3_l3"></li>
        </ul>

       </a>
   </td>
  </tr>

</table>
<script>

//发送请求json文件
var requestURL = 'https://iilleagl.github.io/ccc/book.json';    //json存放的url
var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

request.onload = function() {

var bookinfo = request.response;
var book1_info = bookinfo['major'];

//将图书1的信息插入导入图书1的列表中

var name_0 = document.getElementById('b1_l1');
var author_0 = document.getElementById("b1_l2");
var info_0 = document.getElementById("b1_l3");
name_0.textContent = '书名:'+ bookinfo['major'][0].name;
author_0.textContent='作者:'+bookinfo['major'][0].author;
info_0.textContent=bookinfo['major'][0].intro;

var name_1 = document.getElementById('b2_l1');
var author_1 = document.getElementById("b2_l2");
var info_1 = document.getElementById("b2_l3");
name_1.textContent = '书名:'+ bookinfo['major'][1].name;
author_1.textContent='作者:'+bookinfo['major'][1].author;
info_1.textContent=bookinfo['major'][1].intro;

var name_2 = document.getElementById('b3_l1');
var author_2 = document.getElementById("b3_l2");
var info_2 = document.getElementById("b3_l3");
name_2.textContent = '书名:'+ bookinfo['major'][2].name;
author_2.textContent='作者:'+bookinfo['major'][2].author;
info_2.textContent=bookinfo['major'][2].intro;

}

</script>
</body>
</html>