我正在用原始javascript编写一个程序。在这个程序中,我调用了一个json对象,它返回一个项目及其价格的列表-
[
{
"shopName": "The Coffee Connection",
"address": "123 Lakeside Way",
"phone": "16503600708",
"prices": [
{
"Cafe Latte": 4.75,
"Flat White": 4.75,
"Cappucino": 3.85,
"Single Espresso": 2.05,
"Double Espresso": 3.75,
"Americano": 3.75,
"Cortado": 4.55,
"Tea": 3.65,
"Choc Mudcake": 6.4,
"Choc Mousse": 8.2,
"Affogato": 14.8,
"Tiramisu": 11.4,
"Blueberry Muffin": 4.05,
"Chocolate Chip Muffin": 4.05,
"Muffin Of The Day": 4.55
}
]
}
]
我试图在我的html页面上将每个项目显示为列表项目< li>
。我正在寻找与angular的ng重复指令相同的功能。我曾尝试将一个子节点附加到<ul >
,但这并没有按预期工作。
我目前拥有的代码如下:
<!DOCTYPE html>
<html>
<body>
<ul id="myList"></ul>
<script src="js/getData.js"></script>
</body>
</html>
我的getData.js文件如下所示:
function loadJSONDoc() {
var answer;
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
answer = JSON.parse(xmlhttp.responseText)
var items = answer[0].prices[0];
for (var index in items) {
var node = document.getElementById("myList");
var textnode = document.createTextNode(index + " : " + items[index]);
node.appendChild(textnode);
}
document.getElementById('myList').appendChild(node);
}
}
xmlhttp.open("GET", "/items", true);
xmlhttp.send();
}
document.addEventListener("DOMContentLoaded", function (event) {
loadJSONDoc();
});
我想要的输出如下:
<ul>
<li>Cafe Latte: $4.75</li>
<li>Flat White: $4.75</li>
<li>Cappucino: $3.85</li>
<!-- etc............ -->
</ul>
如有任何帮助,我们将不胜感激。此外,需要注意的是,我使用了有效的document.write(index + " : " + items[index] + "</ br > "
,但这不是我想要的,我希望这从我上面的描述中可以明显看出。
谢谢,Paul
您应该创建li
元素,将textnode
附加到它,然后将li
附加到列表:
for (var index in items) {
var node = document.getElementById("myList");
var li = document.createElement('li');
var textnode = document.createTextNode(index + " : " + items[index]);
li.appendChild(textnode);
node.appendChild(li);
}
还要确保您的HTML是有效的。我说的是<ul id="myList"></div>
的事情。
演示:http://plnkr.co/edit/bKl56vg7AkaiJZd7tFVx?p=preview
我看到两件事:
- 您从未在js代码中创建
li
- HTML中出现错误
JS
var node = document.getElementById("myList"); // this should be outside the loop
for(var index in items) {
var li = document.createElement('li');
var textnode = document.createTextNode(index + " : " + items[index]);
li.appendChild(textnode);
node.appendChild(li);
}
并抑制
document.getElementById('myList').appendChild(node);
HTML
<ul id="myList"></div>
应该是
<ul id="myList"></ul>
在这种情况下,清理的方法是使用表。由于逻辑以及更好和对HTML:的可靠CSS访问
<table>
<tr><td>name</td><td>price</td></tr>
<tr><td>name</td><td>price</td></tr>
</table>
例如CSS:
table {
border-collapse: separate;
border-spacing: 20px;
border: 1px solid silver;
}
JS:
var obj = JSON.parse(xmlhttp.responseText);
var output = "<table>";
for(var name in obj[0].prices[0]) {
output += "<tr><td>" + name + "</td>" + "<td>" + obj[0].prices[0][name] + "</td></tr>";
}
output += "</table>";
document.getElementById("myList").innerHTML = output;
演示:http://embed.plnkr.co/6MNeKK/preview