以HTML形式打印Ajax结果

Question

我有这个J查询代码：$(document(.ready(function(｛

var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
console.log(result.passwords);   
}
})
}
);

JSON文件如下所示：
{"密码"：[
{"value"："tom"，"count"："432517"}，
{"value"："anaconda"，"count"："454658"}，
{"value"："111111"，"count"："148079"}，

我需要做的是打印出这些对象中的每一个，这些对象将在有序列表中打印出来(例如，它应该看起来像这样：

1. 汤姆432517
2. 蟒蛇454658
3. 111111 148079

到目前为止，我还没有尝试过有效的方法。不过，我可以对整个对象进行console.log操作。有什么建议吗？

Answer 1

示例渲染：

var $outData = $('#data');
var ajaxUrl = 'url.json';
$.ajax(
{
type: 'GET',
url:ajaxUrl,
success: function (result) {
result.passwords.forEach(pwd => $outData.append(`<div>${pwd.value} ${pwd.count}</div>`));   
}
})
}
);

Answer 2

完成后，您可以创建元素并附加到dom，

const data = {
"passwords": [{
"value": "tom",
"count": "432517"
},
{
"value": "anaconda",
"count": "454658"
},
{
"value": "111111",
"count": "148079"
}
]
}
const ol = document.createElement("ol");
for (const {
value,
count
} of data.passwords) {
const li = document.createElement("li")
li.innerText = `${value} -> ${count}`
ol.appendChild(li)
}
document.querySelector("#root").appendChild(ol)

<div id="root"></div>