[英]How do I dynamically populate html elements with JSON Data with Javascript not jQuery?
我有以下JSON数据snippit：
{"items": [
{
"title": "sample 1",
"author": "author 1"
},
{
"title": "sample 2",
"author": "author 2"
}
]}
如何使用以下数据填充以下html元素：
<div class="news-story">
<h5>sample 1</h5>
<p>By: author 1</p>
<h5>sample 2</h5>
<p>By: author 2</p>
</div>
我想用Javascript而不是jQuery完成这个。
循环遍历它们并使用DOM函数：
var news = document.getElementsByClassName("news-story")[0];
var items = json.items;
for(var i = 0; i < items.length; i++) {
var h5 = document.createElement("h5");
h5.innerHTML = items[i].title;
news.appendChild(h5);
var p = document.createElement("p");
p.innerHTML = items[i].author;
news.appendChild(p);
}
getElementsByClassName在9之前的IE版本中不起作用。如果你需要支持那些，那么你最好使用jQuery。
var div = document.getElementsByClassName('news-story')[0],
h5 = div.getElementsByTagName('h5'),
p = div.getElementsByTagName('p'),
data = JSON.parse( my_JSON_data );
data.items.forEach(function(v,i) {
h5[i].innerHTML = v.title;
p[i].innerHTML = "By: " + v.author;
});
如果需要支持旧版浏览器，则可以使用典型的for语句而不是forEach方法。
for( var i = 0; i < data.items.length; ++i ) {
var v = data.items[i];
h5[i].innerHTML = v.title;
p[i].innerHTML = "By: " + v.author;
}
我建议使用ID而不是类的news-story元素，所以你可以使用getElementById （当然除非你有几个） 。
如果这是不可能的，您可能希望使用MDN中的兼容性函数来获取getElementsByClassName 。
如果你需要创建内部元素，那么这是一种方式：
var div = document.getElementsByClassName('news-story')[0],
data = JSON.parse( my_JSON_data ),
html;
html = data.items.map(function(v,i) {
return '<h5>' + v.title + '</h5>' +
'<p>By: ' + v.author + '</p>';
}).join('');
div.innerHTML = html;
@ Xeon06在他的回答中展示了如何使用createElement() ，这可以说是一种更好的方法。
这是我如何做到的：
var div = document.getElementsByClassName('news-story')[0],
frag = document.createDocumentFragment(),
data = JSON.parse( my_JSON_data );
data.items.forEach(function(v,i) {
frag.appendChild( document.createElement('h5') ).innerHTML = v.title;
frag.appendChild( document.createElement('p') ).innerHTML = "By: " + v.author;
});
div.appendChild( frag );
当然，您可以修改它以使用for语句：
var div = document.getElementsByClassName('news-story')[0],
frag = document.createDocumentFragment(),
data = JSON.parse( my_JSON_data );
for( var i = 0; i < data.items.length; ++i ) {
var v = data.items[i];
frag.appendChild( document.createElement('h5') ).innerHTML = v.title;
frag.appendChild( document.createElement('p') ).innerHTML = "By: " + v.author;
}
div.appendChild( frag );
使用documentFragment的好处是，您可以通过片段而不是多个附加对DOM进行单个附加。 这样可以提供更好的性能，尤其是当您拥有大量数据时。
迟到总比没好...我最近做了一个lib来做这个！
FragBuilder是库..用法非常简单：对于您发布的示例，您需要稍微更改JSON以使其更具语义性...
var frag = [{"items": [
{
"title": "sample 1",
"author": "author 1"
},
{
"title": "sample 2",
"author": "author 2"
}
]}];
会成为
var frag = [ { "childNodes" : [ { "childNodes" : [ { "textContent" : "sample 1" } ],
"tagName" : "H5"
},
{ "childNodes" : [ { "textContent" : "By: author 1" } ],
"tagName" : "P"
},
{ "childNodes" : [ { "textContent" : "sample 2" } ],
"tagName" : "H5"
},
{ "childNodes" : [ { "textContent" : "By: author 2" } ],
"tagName" : "P"
}
],
"className" : "news-story",
"tagName" : "DIV"
} ];
然后你会通过调用FragBuilder(frag)生成一个DocumentFragment
如果您发现使用HTML更容易模板然后转换为JSON https://gist.github.com/2313580 （请注意，标签之间的空格不会被处理并导致失败），还有一个反向函数
我发现创建DOM元素最可靠的方法是使用element.innerHTML属性。 基本上，您在页面上要渲染新HTML的位置有一个DIV或SPAN。 然后，您将使用document.getElementById("DIV-ID")在javascripting中获取该范围，然后将DIV的innerHTML属性设置为您将从JSON对象生成的新HTML。 还有许多其他JavaScript函数可以创建元素，但我发现它们并不总是可靠的，并且并不总是具有最佳的跨浏览器支持。
没有jQuery的示例：
<html>
<head>
<title>test</title>
</head>
<body>
<div class="news-story">
<h5>sample 1</h5>
<p>By: author 1</p>
<h5>sample 2</h5>
<p>By: author 2</p>
</div>
<script type="text/javascript">
var json = {
"items": [
{
"title": "sample x",
"author": "author x"
},
{
"title": "sample y",
"author": "author y"
}
]
};
var bindDataToHTML = function(data, element) {
var h5 = null;
var p = null;
h5 = element.getElementsByTagName("h5");
p = element.getElementsByTagName("p");
h5[0].innerText = data.items[0].title;
h5[1].innerText = data.items[1].title;
p[0].innerText = data.items[0].author;
p[1].innerText = data.items[1].author;
};
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) { retnode.push(elem[i]); }
}
return retnode;
};
// For sample purpose, let's imagine this method is a callback
// for a request that provides you with your json data
var doRequest = function() {
var data = json;
var element = null;
var x = document.getElementsByClassName("news-story");
if((null != x) && (0 < x.length)) {
element = x[0];
}
bindDataToHTML(data, element);
};
(function() {
doRequest();
})();
</script>
</body>
</html>
尝试JsRender和JsViews或小胡子/余烬
$(document).ready(function () {
loadfunctionAjax();
});
var loadfunctionAjax = function () {
$.ajax({
type: 'GET',
url: '/Site/SocialLink',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var HTML = '';
for (var i = 0; i < data.length; i++) {
item = data[i];
HTML += '<li><a class="" target="_blank" href="' + item.FALink + '"><i class="fa ' + item.FAIcon + '"></i>' + item.Name + '</a ></li > ';
}
$('#footerSocialNav').append(HTML);
}
});
}
如何使用JavaScript在HTML输入字段上动态填充JSON数据？
[英]How Do I dynamically populate JSON data on html input field using javascript?
如何使用JSON数据动态填充jQuery Mobile页面？
[英]How do I dynamically populate jQuery Mobile pages using JSON data?
如何使用JavaScript / jQuery动态填充多个div？
[英]How do I use JavaScript/jQuery to populate multiple divs dynamically?
如何删除javascript / jquery中动态创建的元素？
[英]How do I delete dynamically created elements in javascript/jquery?
如何使用 javascript（不使用 jquery）将 HTML 表单数据发送到 JSON？
[英]How do I send HTML form data to JSON using javascript (without jquery)?
如何使用Javascript或Jquery将一系列JSON数据附加到HTML？
[英]How do I append a range of JSON data to my HTML using Javascript or Jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.