[英]append dictionary in html using jQuery
i have a dictionary with key and list value and i want to create a card using jQuery append function. 我有一本包含键和列表值的字典,我想使用jQuery附加函数创建一张卡片。
dict = {
"Meizu X8": [
["4GB 64GB Global", "8 months ago", "8.6", "\u20b9 12,509"],
["4GB 128GB Global", "8 months ago", "8.6", "\u20b9 13,992"]
],
"Xiaomi Mi8 Lite": [
["Global 128GB", "8 months ago", "8.6", "\u20b9 16,315"]
],
"UMIDIGI F1": [
["4GB 128GB", "5 months ago", "8.6", "\u20b9 10,884"]
]
}
i want to create a card for every key and if key value having 2 or more list value then function will also create a card with the same key name 我想为每个键创建一个卡,如果键值具有2个或多个列表值,则功能还将创建一个具有相同键名的卡
for eg- 例如
<div class='card'>
<div class='card-header'>Meizu X8</div>
<div class='card-body'>
<h5>4GB 64GB Global</h5>
<h5>8 months</h5>
<h5>8.6</h5>
<h5>12,509</h5>
</div>
</div>
<div class='card'>
<div class='card-header'>Meizu X8</div>
<div class='card-body'>
<h5>4GB 128GB Global</h5>
<h5>8 months</h5>
<h5>8.6</h5>
<h5>13,992</h5>
</div>
</div>
<div class='card'>
<div class='card-header'>Xiaomi Mi8 Lite</div>
<div class='card-body'>
<h5>"Global 128GB</h5>
<h5>8 months</h5>
<h5>8.6</h5>
<h5>16,315</h5>
</div>
</div>
<div class='card'>
<div class='card-header'>UMIDIGI F1</div>
<div class='card-body'>
<h5>4GB 128GB</h5>
<h5>5 months</h5>
<h5>8.6</h5>
<h5>10,884</h5>
</div>
</div>
You can do this by nesting a for loop inside another for loop, like I've done in the following snippet 您可以通过将for循环嵌套在另一个for循环中来完成此操作,就像我在以下代码段中所做的一样
var dict = { "Meizu X8": [ ["4GB 64GB Global", "8 months ago", "8.6", "\₹ 12,509"], ["4GB 128GB Global", "8 months ago", "8.6", "\₹ 13,992"] ], "Xiaomi Mi8 Lite": [ ["Global 128GB", "8 months ago", "8.6", "\₹ 16,315"] ], "UMIDIGI F1": [ ["4GB 128GB", "5 months ago", "8.6", "\₹ 10,884"] ] } for (var name in dict) { for (var entry of dict[name]) { var card = `<div class='card'> <div class='card-header'>${name}</div> <div class='card-body'> <h5>${entry[0]}</h5> <h5>${entry[1]}</h5> <h5>${entry[2]}</h5> <h5>${entry[3]}</h5> </div> </div>` $("#container").append(card) } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div id="container"> </div>
Here is one more solution. 这是另一种解决方案。 It will work even if sometime you will want to expand an array of phone features:
即使您有时想要扩展一系列电话功能,它也将起作用:
var dict = { "Meizu X8": [ ["4GB 64GB Global", "8 months ago", "8.6", "\₹ 12,509"], ["4GB 128GB Global", "8 months ago", "8.6", "\₹ 13,992"] ], "Xiaomi Mi8 Lite": [ ["Global 128GB", "8 months ago", "8.6", "\₹ 16,315"] ], "UMIDIGI F1": [ ["4GB 128GB", "5 months ago", "8.6", "\₹ 10,884"] ] } Object.keys(dict).forEach((model) => { dict[model].forEach((entry) => { var card = `<div class='card'> <div class='card-header'>${model}</div> <div class='card-body'>`+ entry.map((feature) => `<h5>${feature}</h5>`).join("") + `</div></div>`; $("#container").append(card); }); });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.