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 code：

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

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

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

＆＃13;

<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>

＆＃13;

Answer 3

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

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

如何在HTML页面

3 个答案: