如何在HTML页面上显示JSON文件

Question

我开始学习javascript了。 我想在用户单击按钮时在html页面上显示名字和姓氏以及关系值。 我有一个名为FamilyAndFriends.json的简单JSON文件：

    {
    "people":[{"fname":"Adam",
        "lname":"Schmitt",
            "relation":"Brother",
            "relationid":"1"
        },
        {"fname":"Andrew",
        "lname":"Name",
            "relation":"Brother",
            "relationid":"1"
        },
        {"fname":"Jenna",
        "lname":"Name",
            "relation":"Wife",
            "relationid":"2"
        },
        {"fname":"Gary",
        "lname":"Name",
            "relation":"Father",
            "relationid":"3"
        },
        {"fname":"Judy",
        "lname":"Name",
            "relation":"Mother",
            "relationid":"4"            
        },
        {"fname":"Justin",
        "lname":"Name",
            "relation":"Friend",
            "relationid":"5"            
        },
        {"fname":"Billy",
        "lname":"Name",
            "relation":"Friend",
            "relationid":"5"             
        },
        {"fname":"Robbie",
        "lname":"Name",
            "relation":"Friend",
            "relationid":"5"             
        },
        {"fname":"Dylan",
        "lname":"Name",
            "relation":"Friend",
            "relationid":"5"             
        },
        {"fname":"Zach",
        "lname":"Name",
            "relation":"Friend",
            "relationid":"5"             
        }]
}

我尝试搜索，似乎很多人建议jquery但我们现在不要jquery。 当用户点击时，我如何从我的.json文件中获取信息并将其显示在我的html文件中？ 谢谢您的帮助

Answer 1

HTML代码：

<ul id="list"></ul>

只需将您的JSON数据保存在一个变量（或）单独的文件中，作为'FamilyAndFriends.json'。

var data = {
"people":[{"fname":"Adam",
    "lname":"Schmitt",
        "relation":"Brother",
        "relationid":"1"
    },
    {"fname":"Andrew",
    "lname":"Name",
        "relation":"Brother",
        "relationid":"1"
    },
    {"fname":"Jenna",
    "lname":"Name",
        "relation":"Wife",
        "relationid":"2"
    },
    {"fname":"Gary",
    "lname":"Name",
        "relation":"Father",
        "relationid":"3"
    },
    {"fname":"Judy",
    "lname":"Name",
        "relation":"Mother",
        "relationid":"4"            
    },
    {"fname":"Justin",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"            
    },
    {"fname":"Billy",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Robbie",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Dylan",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    },
    {"fname":"Zach",
    "lname":"Name",
        "relation":"Friend",
        "relationid":"5"             
    }]
 };

使用javascript的外部JSON示例：

 var request = new XMLHttpRequest();
 request.open('GET', '/my/url', true); // YOUR EXTERNAL JSON URL

 request.onload = function() {
     if (request.status >= 200 && request.status < 400) {
     // Success!
         var data = JSON.parse(request.responseText);
         var link;
         for (var t = 0; t < data.people.length; t++){
             link = document.createElement("a"+t);
             var ulist = document.getElementById("list");
             var newItem = document.createElement("li");
             newItem.appendChild(link);
             ulist.appendChild(newItem);
             link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;
             link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE
            if (typeof window.addEventListener === 'function'){
                 (function (_td) {
                      link.addEventListener('click', function(){
                      var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE
                      indexId =  parseInt(indexId); //PARSE FROM STRING TO INTEGER
                      alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

                  });
               })(link);
     }
  }
     } else {
      // We reached our target server, but it returned an error

     }
 };

 request.onerror = function() {
  // There was a connection error of some sort
 };

 request.send();

使用javascript的内部JSON示例：

 var link;
 for (var t = 0; t < data.people.length; t++){
    link = document.createElement("a"+t);
    var ulist = document.getElementById("list");
    var newItem = document.createElement("li");
    newItem.appendChild(link);
    ulist.appendChild(newItem);
    link.textContent = 'First Name: '+data.people[t].fname + ', Last Name: ' +data.people[t].lname;
    link.setAttribute('data-ind', t); // ADDED A DATA ATTRIBUTE TO STORE A INDEX VALUE
    if (typeof window.addEventListener === 'function'){
        (function () {
            link.addEventListener('click', function(){
                var indexId = this.getAttribute('data-ind'); //GETTING DATA ATTRIBUTE VALUE
                indexId =  parseInt(indexId); //PARSE FROM STRING TO INTEGER
                alert(data.people[indexId].relation); // YOU WILL GET THE ACTUAL RELATION VALUE.

            });
        })(link);
     }
  }

单击第一个列表时，结果如下所示：

Brother

摇滚吧！

Answer 2

 <head> <title>JSON Basic</title> </head> <body> <p>Display JSON file on HTML page:</p> <p id="demo"></p> <button onclick="displayInfo()">Display</button> <script> var i; var peopleinfo = ""; var people = [{ "fname": "Adam", "lname": "Schmitt", "relation": "Brother", "relationid": "1" }, { "fname": "Andrew", "lname": "Name", "relation": "Brother", "relationid": "1" }, { "fname": "Jenna", "lname": "Name", "relation": "Wife", "relationid": "2" }, { "fname": "Gary", "lname": "Name", "relation": "Father", "relationid": "3" }, { "fname": "Judy", "lname": "Name", "relation": "Mother", "relationid": "4" }, { "fname": "Justin", "lname": "Name", "relation": "Friend", "relationid": "5" }, { "fname": "Billy", "lname": "Name", "relation": "Friend", "relationid": "5" }, { "fname": "Robbie", "lname": "Name", "relation": "Friend", "relationid": "5" }, { "fname": "Dylan", "lname": "Name", "relation": "Friend", "relationid": "5" }, { "fname": "Zach", "lname": "Name", "relation": "Friend", "relationid": "5" }]; for (i = 0; i < people.length; i++) { peopleinfo += people[i].fname + "<br>" + people[i].lname + "<br>" + people[i].relation + "<br>" + people[i].relationid + "<br><p>********</p>"; } function displayInfo() { document.getElementById("demo").innerHTML = peopleinfo; } </script> </body> 

Answer 3

console.log($.parseJSON(yourJsonFile));

有了这个，您将拥有一个包含JSON文件信息的对象。