我目前有一个json文件的人参加以下格式的一系列慈善活动:
t=# with d(t0,t1) as (values
('{{1,2},{5847,5848},{5845,5846}}'::int[][2],'{{1,2},{5847,5848},{10716,10715}}'::int[][2])
, ('{{13,14},{1,2},{5847,5848},{284,285}}'::int[][2],'{{13,14},{1,2},{5847,5848},{1284,1285}}'::int[][2])
)
, u as (
select *
from d
join unnest(t0) with ordinality t(e0,o0) on true
left outer join unnest(t1) with ordinality t1(e1,o1) on o0=o1
)
, p as (
select *
, case when (
not lead(e0=e1) over w
or not lead(e0=e1,2) over w
or e0!=e1
) AND (o1%2) = 1
then ARRAY[e0,lead(e0) over w] end r0
, case when (
not lead(e0=e1) over w
or not lead(e0=e1,2) over w
or e0!=e1
) AND (o1%2) = 1
then ARRAY[e1,lead(e1) over w] end r1
from u
window w as (partition by t0,t1 order by o0)
)
select t0,t1,array_agg(r0),array_agg(r1)
from p
where r0 is not null or r1 is not null
group by t0,t1
;
t0 | t1 | array_agg | array_agg
---------------------------------------+-----------------------------------------+---------------------------+-----------------------------
{{13,14},{1,2},{5847,5848},{284,285}} | {{13,14},{1,2},{5847,5848},{1284,1285}} | {{5847,5848},{284,285}} | {{5847,5848},{1284,1285}}
{{1,2},{5847,5848},{5845,5846}} | {{1,2},{5847,5848},{10716,10715}} | {{5847,5848},{5845,5846}} | {{5847,5848},{10716,10715}}
(2 rows)
我想使用这些数据构建一个简单的HTML列表,以便在每个日期下,名称和国家/地区显示如下:
[
{
"FirstName": "Anushka",
"Country": "UK",
"Day": "13/10/2017"
},
{
"FirstName": "Alessandra",
"Country": "IT",
"Day": "16/10/2017"
},
{
"FirstName": "Clare",
"Country": "US",
"Day": "13/10/2017"
}
]
我是JSON的新手,到目前为止我已经想出了如何将Name和Country添加到页面上,但我无法弄清楚如何使用if语句仅在date = 13/10/2017中输出
这是我到目前为止所得到的:
<div id="13102017">
<h1>13/10/2017</h1>
<div class="col-sm-4"><p>Anushka, UK</p></div>
<div class="col-sm-4"><p>Clare, US</p></div>
</div>
<div id="16102017">
<h1>16/10/2017</h1>
<div class="col-sm-4"><p>Alessandra, IT</p></div>
</div>
显然,上述内容目前只是将每个名称输出到#13102017部分。我知道我可能在那里需要一个IF,但我很难过。任何指针都会非常感激!
答案 0 :(得分:0)
但我无法弄清楚如何使用if语句只输出if date = 13/10/2017
只需检查item.Day == "13102017"
$( document ).ready(function() {
$.getJSON("URL_HERE", function(data) {
$.each(data, function(i, item) {
if ( item.Day == "13102017" )
{
var id = item.Day.replace( /\D/g, "" );
var html = '<div id="' id '">';
html += '<h1>' + item.Day + '</h1>';
html += '<div class="col-sm-4"><p>' + item.FirstName + '</p></div>';
html += '<div class="col-sm-4"><p>' + item.Country + '</p></div>';
html += '</div>';
$(body).append( html );
}
});
});
});
答案 1 :(得分:0)
我建议你创建整个html,然后将其设置为html。
var data = [{
"FirstName": "Anushka",
"Country": "UK",
"Day": "13/10/2017"
},
{
"FirstName": "Alessandra",
"Country": "IT",
"Day": "16/10/2017"
},
{
"FirstName": "Clare",
"Country": "US",
"Day": "13/10/2017"
}
];
$(function() {
// You can have this inside $.getJSON
var _html = "";
data.forEach(function(item) {
_html += '<div id="' + item.Day.replace(/\//g, "") + '">' +
'<h1>' + item.Day + '</h1>' +
'<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>' +
'</div>';
});
$("#container").html(_html);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
&#13;
答案 2 :(得分:0)
在每个循环上,首先检查日期div是否存在,如果不存在,则创建它。然后将信息附加到该div ...
$.getJSON("URL_HERE",function(data) {
$.each(data, function(i,item) {
var dateId = item.Day.replace(/\//g,'');
if (!$('div#'+dateId).length)
$('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');
$('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
});
});
对于数组循环,我个人更喜欢使用for
(比jquery each
更快)...
$.getJSON("URL_HERE",function(data) {
for (var i=0, l=data.length; i<l; i++) {
var item = data[i],
dateId = item.Day.replace(/\//g,'');
if (!$('div#'+dateId).length)
$('body').append('<div id="'+dateId+'"><h1>'+item.Day+'</h1></div>');
$('div#'+dateId).append('<div class="col-sm-4"><p>' + item.FirstName + ", " + item.Country + '</p></div>');
}
});
注意 :我正在将日期div添加到正文中,只需将$('body')
更改为要将其放入页面的容器。