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

Question

I am writing a program in raw javascript. 我正在用原始JavaScript编写程序。 In this program I am calling a json object, which returns a list of items and their prices - 在此程序中，我正在调用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
            }
        ]
    }
]

I am trying to display each item as a list item < li> on my html page. 我试图在HTML页面上将每个项目显示为列表项< li> 。 I am looking for the same functionality as angular's ng-repeat directive. 我正在寻找与angular的ng-repeat指令相同的功能。 I have tried to append the a child node to the <ul > , however this didn't work as expected. 我尝试将一个子节点附加到<ul > ，但是这没有按预期工作。

The code I currently have is as follows: 我目前拥有的代码如下：

<!DOCTYPE html>
<html>
    <body>
        <ul id="myList"></ul>
        <script src="js/getData.js"></script>
    </body>
</html>

My getData.js file looks as follows: 我的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();
});

My desired output is as follows: 我想要的输出如下：

<ul>
   <li>Cafe Latte: $4.75</li>
   <li>Flat White: $4.75</li>
   <li>Cappucino: $3.85</li>
   <!-- etc............ -->
</ul>

Any help with this would be greatly appreciated. 任何帮助，将不胜感激。 Also, to note that I used document.write(index + " : " + items[index] + "</ br > " which worked, however, this is not what I am looking for, which I hope is evident from my description above. 另外，要注意我使用了document.write(index + " : " + items[index] + "</ br > " ，但是，这不是我想要的，我希望从我的描述中可以清楚地看到以上。

Thanks, Paul 谢谢保罗

Answer 1

You should create li element, append textnode to it, and after that append li to the list: 您应该创建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);
}

Also make sure your HTML is valid. 另外，请确保您的HTML有效。 I'm talking about <ul id="myList"></div> things. 我说的是<ul id="myList"></div> 。

Demo: http://plnkr.co/edit/bKl56vg7AkaiJZd7tFVx?p=preview 演示： http ： //plnkr.co/edit/bKl56vg7AkaiJZd7tFVx？p = preview

Answer 2

I see 2 things : 我看到两件事：

you never create li in your js code 你永远不会在你的js代码中创建li
you got an error in your HTML 您的HTML错误

JS 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);
}

and suppress 并压制

document.getElementById('myList').appendChild(node);

HTML HTML

<ul id="myList"></div>

should be 应该

<ul id="myList"></ul>

Answer 3

A clean way in this case is to use a table . 在这种情况下，一种干净的方法是使用表。 Because of the logic and because of a better and solid CSS access to your HTML: 由于逻辑以及对HTML的更好而坚实的CSS访问 ，请执行以下操作：

<table>
    <tr><td>name</td><td>price</td></tr>
    <tr><td>name</td><td>price</td></tr>
</table>

For example the CSS: 例如CSS：

table {
    border-collapse: separate;
    border-spacing: 20px;
    border: 1px solid silver;
}

JS: 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;

Demo : http://embed.plnkr.co/6MNeKK/preview 演示： http : //embed.plnkr.co/6MNeKK/preview

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-04-04 21:36:12

解决方案2
2 2015-04-04 21:37:14

解决方案3
1 2015-04-04 22:58:00

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-04-04 21:36:12

解决方案2 2 2015-04-04 21:37:14

解决方案3 1 2015-04-04 22:58:00

解决方案1
2 已采纳 2015-04-04 21:36:12

解决方案2
2 2015-04-04 21:37:14

解决方案3
1 2015-04-04 22:58:00