js - упорядоченные данные JSON из конечной точки ajax находятся в неправильном порядке, и кеширование не является проблемой

Question

У меня есть приложение, использующее jquery 2.0.3 и серверную часть CakePHP 2.x. Это устаревшее приложение, поэтому мы используем эти версии.

Часть приложения имеет <select id="orderTags">, который при изменении запускает ajax-запрос к конечной точке /get_tags. Это возвращает JSON-кодированный ответ, который затем используется для обновления некоторых элементов списка в элементе с именем #tags.

Код для выполнения запроса работает, прослушивая изменения #orderTags:

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

Затем выполняется get_tags() и передается строка для упорядочения, которая устанавливается следующим образом:

1. Порядок добавлен по дате (имя: "date")
2. Заказ по названию ASC (имя: "name_asc")
3. Заказ по названию DESC (имя: "name_desc")

Я вижу в своем браузере вкладку Сеть, что запросы выполняются к соответствующей конечной точке - с присвоением статуса 200 - и передачей соответствующей строки в качестве параметра $_GET:

1. /get_tags?orderby=date
2. /get_tags?orderby=name_asc
3. /get_tags?orderby=name_desc

При просмотре Ответа на вкладке Моя сеть конечная точка выдает правильный (т. Е. Разный порядок в каждом случае) JSON. Например, скриншоты ниже, поэтому ответ из (2) и (3) выше, и, как вы можете видеть, порядок в алфавитном порядке:

Я использую функцию $.each в jquery для циклического прохождения ответа. Ниже приведен код внутри 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.

Так, например, я разместил вывод console.log из 2 приведенных выше снимков экрана. В каждом случае представлены одни и те же данные - в совершенно неверном порядке:

Почему это происходит?

Answer 1

В случае, если у кого-то еще есть такая же проблема, я нашел решение. Проблема - как упомянуто @Pointy в комментариях - была связана с:

Нет установленного порядка свойств в объектах JavaScript. Если вы хотите фиксированный порядок, используйте массив

Данные возвращаются конечной точкой /get_tags с использованием функциональности PHP json_encode.

Решение состояло в том, чтобы использовать JSON_FORCE_OBJECT там, где производился вывод, т.е.

echo json_encode($output, JSON_FORCE_OBJECT);

Где $output - массив данных, которые должна возвращать конечная точка.

Здесь больше информации о том, почему это работает: Как мне `json_encode ()` ключи из массива PHP? . Это означает, что возвращаемые данные имеют ключи массива, которые важны для сохранения порядка.

Снимок экрана Пример JSON, возвращаемого для заказа A-Z. Обратите внимание, что ключи массива выделены зеленым цветом по сравнению с оригинальными снимками экрана (в которых отсутствуют ключи массива):

Код $.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>';
});