如果内容匹配字符串,如何用javascript / jquery解析json

时间:2017-10-20 08:44:50

标签: javascript jquery json

我目前有一个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,但我很难过。任何指针都会非常感激!

3 个答案:

答案 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。

&#13;
&#13;
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;
&#13;
&#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')更改为要将其放入页面的容器。