如何根據輸入的json動態加載html元素？
[英]How to load html elements dynamically based upon input json?
問題描述
如何遍歷對象的輸入數組？
目前只包含了 2 個人的信息。 但是輸入是50多人的信息，需要遍歷所有的人。
示例代碼：
const json = [ { _id: "5af5cf0270d455a211200d4c", isActive: true, balance: "$3,507.97", picture: "http://placehold.it/32x32", age: 24, eyeColor: "brown", name: "Ahmed", gender: "male", company: "ATW", email: "atw@atw.com", phone: "+1 98908098", address: "661 Terrace Place, Elliott, Ohio, 9927", about: "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\\r\\n", registered: "2014-12-10T07:18:10 +02:00", latitude: -84.359436, longitude: 156.008804, tags: [ "excepteur", "eiusmod", "laboris", "fugiat", "minim", "dolor", "qui" ], friends: [ { id: 0, name: "Shields Terrell" }, { id: 1, name: "Hilary Bruce" }, { id: 2, name: "Lorraine Torres" } ] }, { _id: "5af5cf0254f91fa2d555e1ae", isActive: false, balance: "$2,219.42", picture: "http://placehold.it/32x32", age: 27, eyeColor: "blue", name: "Maisa", gender: "female", company: "INTERFIND", email: "aqr@qra.com", phone: "+1 9780989080980", address: "595 Foster Avenue, Villarreal, Massachusetts, 4604", about: "Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\\r\\n", registered: "2015-07-08T01:24:50 +03:00", latitude: -38.471736, longitude: -158.491974, tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"], friends: [ { id: 0, name: "Dina Berger" }, { id: 1, name: "Carmella Mckinney" }, { id: 2, name: "Campbell Wooten" } ] } ]; document.getElementById("name").innerHTML = `${json[0].name}`; document.getElementById("fullname").innerHTML = `${json[0].name}`; document.getElementById("gender").innerHTML = `${json[0].gender}`; document.getElementById("phone").innerHTML = `${json[0].phone}`; document.getElementById("company").innerHTML = `${json[0].company}`; document.getElementById("address").innerHTML = `${json[0].address}`; document.getElementById("about").innerHTML = `${json[0].about}`; document.getElementById("registered").innerHTML = `${json[0].registered}`;
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Employee's Page</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<h1><span id="name"></span></h1>
<div class="container" style="border:1px solid #cecece;">
<div class="flexcontainer">
<div>
<img src="" alt="Employee's Picture" id="picture">
</div>
<div>
<ul>
<li>
<h3>Full name: <span id="fullname"></span></h3>
</li>
<li>
<h3>Gender: <span id="gender"></span></h3>
</li>
<li>
<h3>Phone number: <span id="phone"></span></h3>
</li>
<li>
<h3>Company: <span id="company"></span></h3>
</li>
<li>
<h3>Address: <span id="address"></span></h3>
</li>
</ul>
</div>
</div>
<div>
<h3>About employee:</h3>
<p><span id="about"></span></p>
</div>
<div>
<h3>Employee was registered in the system: <span id="registered"></span></h3>
</div>
</div>
</body>
<script src="./assets/js/jsonlast.js"></script>
</html>
HTML（在我的問題中）頁面連接到另一個頁面，其中包含一個包含 json 文件中所有人員姓名的表格。 需要的是，每當單擊表中的name時，它應該將我帶到employee.html （我在問題中包含的html頁面），但帶有該人的信息。
3 個解決方案
解決方案1
1 已采納 2018-10-07 14:07:55
我假設您想遍歷 JSON 並更新各個元素的 innerHTML。 下面的代碼可以幫助您實現這一點，但請注意，您必須確保您的 HTML 元素名稱必須與 JSON 屬性的名稱匹配。 前任。 此代碼不適用於：
document.getElementById("image").src = `${json[0].picture}`;
它應該是：
document.getElementById("picture").src = `${json[0].picture}`;
因此，在使用該解決方案之前，將您的圖像元素更新為：
<img src="" id="picture" />
為了顯示多人使用此解決方案，我添加了兩個循環，外循環將遍歷每個人的記錄：
將您的<ul>...</ul>為<ul id="personList">...</ul>
const json = [ { _id: "5af5cf0270d455a211200d4c", isActive: true, balance: "$3,507.97", picture: "http://placehold.it/32x32", age: 24, eyeColor: "brown", name: "Ahmed", gender: "male", company: "ATW", email: "atw@atw.com", phone: "+1 98908098", address: "661 Terrace Place, Elliott, Ohio, 9927", about: "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\\r\\n", registered: "2014-12-10T07:18:10 +02:00", latitude: -84.359436, longitude: 156.008804, tags: [ "excepteur", "eiusmod", "laboris", "fugiat", "minim", "dolor", "qui" ], friends: [ { id: 0, name: "Shields Terrell" }, { id: 1, name: "Hilary Bruce" }, { id: 2, name: "Lorraine Torres" } ] }, { _id: "5af5cf0254f91fa2d555e1ae", isActive: false, balance: "$2,219.42", picture: "http://placehold.it/32x32", age: 27, eyeColor: "blue", name: "Maisa", gender: "female", company: "INTERFIND", email: "aqr@qra.com", phone: "+1 9780989080980", address: "595 Foster Avenue, Villarreal, Massachusetts, 4604", about: "Nostrud exercitation ea enim in consequat voluptate sint et laboris laborum elit nisi veniam. Do consectetur magna eiusmod anim nisi id sint consequat. Amet duis proident nisi excepteur. Reprehenderit non amet occaecat deserunt. Duis voluptate non in ex esse sit nostrud esse fugiat laboris fugiat qui reprehenderit.\\r\\n", registered: "2015-07-08T01:24:50 +03:00", latitude: -38.471736, longitude: -158.491974, tags: ["mollit", "minim", "duis", "anim", "aute", "magna", "ut"], friends: [ { id: 0, name: "Dina Berger" }, { id: 1, name: "Carmella Mckinney" }, { id: 2, name: "Campbell Wooten" } ] } ]; let i = 1; for(var key in json[i]){ if(key === "picture"){ document.getElementById(key).src = json[i][key]; } else { let spanElement = document.getElementById(key); if (spanElement){ spanElement.innerHTML = json[i][key]; } } }
<div class="flexcontainer"> <div> <img src="" alt="Employee's Picture" id="picture"> </div> <div> <ul> <li> <h3>Full name: <span id="name"></span></h3> </li> <li> <h3>Gender: <span id="gender"></span></h3> </li> <li> <h3>Phone number: <span id="phone"></span></h3> </li> <li> <h3>Company: <span id="company"></span></h3> </li> <li> <h3>Address: <span id="address"></span></h3> </li> </ul> </div> </div>
解決方案2
0 2018-10-07 14:03:15
如果您可以使用 EMCAScript 5，您可以使用它來循環您的json[0]對象。
Object.keys(json[0]).forEach(function(key) {
var el = document.getElementById(key);
var isImg = (el.nodeName.toLowerCase() === 'img');
if (isImg) el.src = json[0][key];
else el.innerHTML = json[0][key];
});
解決方案3
0 2018-10-07 14:10:54
試試JSON.parse() ，這是一個內置函數，可以將 json 格式轉換為 javascript 對象。 然后你可以使用這個對象來改變你的內容。 例如：
let JSON_object = "{\\"name\\": \\"willem\\", \\"fullname\\": \\"van der Veen\\" }" const parsedObj = JSON.parse(JSON_object) document.getElementById("name").innerHTML = parsedObj.name; document.getElementById("fullname").innerHTML = parsedObj.fullname;
<div id="name">random</div> <div id="fullname">random</div>
如何將json數據動態插入html元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.