javascript 使用 $.each 和 if 与 $.getJSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17226030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use $.each and if with $.getJSON
提问by user2471501
Me and $.each aren't good friends, I can't seem to figure out how I should use this statement to print all my data in my JSON file. Another problem is the if statement, I tried it in many ways, but whatever I do, no data is being printed.
我和 $.each 不是好朋友，我似乎无法弄清楚我应该如何使用这个语句来打印我的 JSON 文件中的所有数据。另一个问题是if语句，我尝试了很多方法，但无论我做什么，都没有打印数据。
My JSON file
我的 JSON 文件
[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]
My $.getJSON script
我的 $.getJSON 脚本
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var el = document.getElementById("kome");
el.innerHTML = "<td><a href=" + data.link + " data-ajax='false'><img src=" + data.img + "><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></a></td>";
});
}
</script>
So how would I integrate the $.each statement and seperate from that, the if statement?
那么我将如何集成 $.each 语句并将其与 if 语句分开？
回答by Sushanth --
Try this
试试这个
$.getJSON("home.json", function (data) {
var html = '',
el = document.getElementById("kome");
$.each(data, function (key, val) {
html += "<td><a href=" + val.link + " data-ajax='false'><img src=" + val.img + "><div class='dsc'>" + val.expo + "<br><em>" + val.datum + "</em></div></a></td>";
});
el.innerHTML = html;
});
回答by Depressio
Something like this?
像这样的东西？
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var html = '';
$.each(data, function(i, record) {
html += '' +
'<td>' +
'<a href="' + record.link + '" data-ajax="false">' +
'<img src="' + record.img + '">' +
'<div class="dsc">' +
record.expo + '<br>' +
'<em>' + record.datum + '</em>' +
'</div>' +
'</a>' +
'</td>';
});
$('#kome').html(html);
});
}
</script>
Note: I haven't tested this, so there may be a few syntax errors (mostly concerned about the quotes in the string concatenation).
注意：我没有测试过这个，所以可能会有一些语法错误（主要是关心字符串连接中的引号）。
I will note that you don't need jQuery's $.each for this; you can use a basic for-loop:
我会注意到你不需要 jQuery 的 $.each ；您可以使用基本的 for 循环：
for (var i = 0; i < data.length; i++) {
var record = data[i];
... stuff...
}
jQuery's .each()is really useful when iterating over elements in the DOM, though. For example, if you wanted to iterate over the elements with class dsc, you could do:
不过，jQuery.each()在迭代 DOM 中的元素时非常有用。例如，如果你想用 class 迭代元素dsc，你可以这样做：
$('.dsc').each(function(i, dsc) {
// Do stuff to the $(dsc) element.
});
Also, you might as well use jQuery's selectors (the $('#kome')) if you're going to use jQuery.
此外，$('#kome')如果您打算使用 jQuery ，您不妨使用 jQuery 的选择器 (the )。
jQuery's APIusually has solid examples for stuff; this is one such case.
jQuery 的 API通常有可靠的示例；这是一个这样的案例。
回答by Lex
$.each can iterate arrays [] or objects {}, your json contains both, so first you need to tackle array, that gives you an object on each iteration. Then you can access its properties. jQuery each documentation
$.each 可以迭代数组 [] 或对象 {}，你的 json 包含两者，所以首先你需要处理数组，它在每次迭代时为你提供一个对象。然后您可以访问其属性。 jQuery 每个文档
Second thing: to append to innerHTML use "+=" not "=" or you will reset html on each iteration.
第二件事：附加到innerHTML 使用“+=”而不是“=”，否则您将在每次迭代时重置html。
var el = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) {
$.each(data, function(n, linkData) {
el.innerHTML += '<a href="' + linkData.link + '">' + linkData.expo + '</a>';
});
}
