原始javascript将json对象中的项目打印到列表中的屏幕上



我正在用原始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

我看到两件事:

  1. 您从未在js代码中创建li
  2. 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

最新更新