Question

我想知道如何在API之前订购数据。

应该如何：

<table>
    <tr>
        <th>2017-02-17</th>
    </tr>
    <tr>
        <td>some date</td>
        <td>some date</td>
        <td>some date</td>
    </tr>
    <tr>
        <th>2017-02-15</th>
    </tr>
    <tr>
        <td>some date</td>
        <td>some date</td>
        <td>some date</td>
    </tr>
</table>

示例：

URL API：http://api.tradingeconomics.com/calendar?c=guest:guest

我的代码：

$.ajax({
    url: "url",
    type: "Get",
    datatype: "JSON",
    contentType: "application/json",
    error : function (data) { console.log("error:" + data) },
    success: function (response) {
        response.forEach(function (data) {

            $('.top_table').append(
                "<tr>" +
                    "<th>DATE</th>" +
                "</tr>" +
                "<tr id='content'>" +
                    "<td>some text....</td>" +
                    "<td>some text....</td>" +
                    "<td>some text....</td>" +
                    "<td>some text....</td>" +
                "</tr>"
            );

        });

        console.log(response);

    }

});

但它的印刷品如下：

日期
  导致
  日期
  结果

我怎么做？

Answer 1

我不知道我是否理解你的问题，但我认为这可以给你一些提示。

如果您提出API Array请求，则Objects会返回Ajax GET，因此您可以在插入之前订购此Array将内容导入DOM：

下一个示例按降序排列数据，比较Date参数，还有另一个名为LastUpdate的日期参数，我不知道您是否要在逻辑中使用它。

$.get("https://api.tradingeconomics.com/calendar?c=guest:guest", function (data) {

    //---Order the array received from the server
    data.sort(function (a, b) {

        return (new Date(a.Date)) - (new Date(b.Date));

    });

    //---The data is ordered, you can insert it into the DOM

});

另一方面，您的代码在每次迭代中插入一行header内容和一行body内容，这是不正确的。您需要在一行中添加所有标题文本，并且Array的每个项目都需要插入到单独的行中。

这里有一个工作示例，可以让您了解该过程：

http://jsfiddle.net/elchininet/nvv4fnon/

编辑：看到您的评论，我现在明白您希望分组数据，而不仅仅是订购。我建议您使用reduce类的Array方法创建按日期分隔的新数据，之后您可以在表格中插入数据：

var regdate = /^(\d{4}\-\d{2}\-\d{2})T(\d{2}:\d{2}:\d{2})$/;

//---Sort the data from the server
data.sort(function (a, b) {

    return (new Date(a.Date)) - (new Date(b.Date));

});

var group = data.reduce(function (before, current) {

    var day = current.Date.replace(regdate, "$1");
    var hour = current.Date.replace(regdate, "$2");

    if (!before[day]) {

        before[day] = [];

    }

    current.Hour = hour;

    before[day].push(current);

    return before;

}, {});

//---The data is ordered and grouped, you can insert it into the DOM

使用虚假数据的工作示例（由于API中的示例仅返回一天）：

Answer 2

如果没有插件，除非＆＃34;日历＆＃34;否则这将很难实现。从数据库中提取信息，可能值得在PHP中进行排序，在jQuery中加载和显示数据

<script type="javascript">
$(function() {
    $("BODY").on("click", "TH[data-orderby]", function() {
        var order = $(this).data("orderby") || "date";
        var parent = $(this).parents("table").parent();
        $.ajax({
            url: 'calendar?c=guest:guest',
            data: 'order-by=' + URLEncode(order),
            type: 'POST',
            success: function(response) {
                parent.html(response);
            },
            error: function(event, request, settings) {
                console.warn("Ajax Error", request);
            }
        })
    });
});
</script>
<div class="parent">
<table>
    <thead>
    <tr>
        <th>Heading</th>
        <th data-orderby="date">Date</th>
        <th>Title</th>
        <th data-orderby="last_updated">Last Updated</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    </tbody>
</table>

因为我们使用$("BODY").on("click", "TH[data-orderby]")，即使从服务器重新加载数据，排序功能仍将保留。

我希望这会有所帮助。

我如何订购数据预约

2 个答案: