Node.js - 来自 ajax 端点的有序 JSON 数据顺序错误，缓存不是问题答案

【问题标题】：js - Ordered JSON data from an ajax endpoint is in wrong order, and caching is not the problemNode.js - 来自 ajax 端点的有序 JSON 数据顺序错误，缓存不是问题
【发布时间】：2019-02-08 11:22:25
【问题描述】：

我有一个使用 jquery 2.0.3 和 CakePHP 2.x 后端的应用程序。这是一个遗留应用程序，这就是我们使用这些版本的原因。

应用程序的一部分具有<select id="orderTags">，当它更改时会触发对端点/get_tags 的ajax 请求。这会返回一个 JSON 编码的响应，然后用于更新名为 #tags 的元素中的一些列表项。

通过侦听#orderTags 的更改来发出请求的代码：

$('#orderTags').change(function() {
    var order = $('#orderTags option:selected').val();
    $("#tags ul").html('');
    get_tags(order);
});

然后执行get_tags()并传入一个用于排序的字符串，设置如下：

按添加日期排序（名称："date"）
按名称 ASC 排序（名称："name_asc"）
按名称 DESC 排序（名称："name_desc"）

我可以在我的浏览器网络选项卡中看到正在向适当的端点发出请求 - 给出 200 状态 - 并将适当的字符串作为 $_GET 参数传递：

/get_tags?orderby=date
/get_tags?orderby=name_asc
/get_tags?orderby=name_desc

在我的网络选项卡中查看响应时，端点正在生成正确的（即每种情况下的不同顺序）JSON。例如下面的屏幕截图，上面 (2) 和 (3) 的响应，如您所见，顺序是按字母顺序排列的：

我在 jquery 中使用 $.each 函数来循环响应。以下是上面引用的get_tags()里面的代码：

function get_tags(order) {

   order = order || "date";

   $.ajax({
        url: '/get_tags',
        dataType: 'json',
        data: {'orderby': order},
        cache: false
    }).done(function (data) {
        console.log(data);
        var items = '';

        $.each(data, function (key, val) {
            items += '<li id="tag-' + key + '"><i class="fa-li fa fa-tags"></i>' + val + '</li>';
        });

        $("#tags ul").append(items);

   });

console.log(data) 正在为脚本的响应提供不同的输出。我使用了cache: false，可以看到jquery 在URL 中附加了_ 参数。

例如，我发布了上述 2 个屏幕截图的 console.log 输出。在每种情况下都显示相同的数据 - 完全错误的顺序：

为什么会这样？

【问题讨论】：

JavaScript 对象中的属性没有设置顺序。如果你想要一个固定的顺序，使用一个数组。
返回数组格式的JSON？或者使用js中的东西将其作为ajax.done()中的数组来处理？如果您知道此问题的答案或有链接，请发布解决方案。
返回一个对象数组而不是单个对象，或者返回一个辅助数组，该数组具有主对象中属性名称的正确顺序。这个想法是涉及一个数组，因为顺序本质上是固定的。

标签： javascript jquery caching

【解决方案1】：

如果其他人有同样的问题，我已经找到了解决方案。正如@Pointy 在 cmets 中提到的那样，这个问题与以下问题有关：

JavaScript 对象中的属性没有固定的顺序。如果你想要一个固定的顺序，使用一个数组

/get_tags 端点使用 PHP 的 json_encode 功能返回数据。

解决方案是在产生输出的地方使用JSON_FORCE_OBJECT，即

echo json_encode($output, JSON_FORCE_OBJECT);

其中$output 是端点应返回的数据数组。

这里有更多关于它为什么起作用的信息：How do I `json_encode()` keys from PHP array?。这意味着返回的数据具有数组键，这对于保持顺序很重要。

为订购 A-Z 返回的 JSON 的屏幕截图示例。请注意以绿色突出显示的数组键与原始屏幕截图（缺少数组键）：

$.each 代码也需要稍作调整。这是因为key 现在代表数组键（在上面的屏幕截图中以绿色突出显示），val 是端点返回的数据对象，可以使用点符号访问：

$.each(data, function (key, val) {
    items += '<li id="tag-' + val.id + '"><i class="fa-li fa fa-tags"></i>' + val.name + '</li>';
});

【讨论】：