Не могу l oop над сгруппированным массивом в JS

Question

К сожалению, у меня снова проблемы с сгруппированными сообщениями. Я уже получил от вас большую помощь, поэтому мне немного неловко спрашивать снова - но я не продвигаюсь вперед.

Моей первой целью было сгруппировать сообщения по дате их создания. Благодаря вашей помощи это работает очень хорошо сейчас. Теперь я попытался вывести сгруппированные сообщения, но это не работает. Я постепенно все больше не понимаю ...

Я хочу сначала вывести ключ группы (дату), а затем каждое отдельное сообщение в каждой группе. Вот что я пробовал:

jQuery(document).ready(function ($) {
    let messages = [{
        sender_id: "0",
        message: "Test",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }, {
        sender_id: "0",
        message: "Hallo",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }];

    let groupedMessages = [];

    $(messages).each(function (index, message) {
        let createdAtDate = new Date(message["created_at"]).toLocaleDateString(navigator.language, {
            day: "2-digit",
            month: "2-digit",
            year: "numeric"
        });


        if (typeof groupedMessages[createdAtDate] === "undefined") {
            groupedMessages[createdAtDate] = [];
        }

        groupedMessages[createdAtDate].push(message);
    });

    console.log(groupedMessages);

    if (groupedMessages && groupedMessages.length > 0) {
        $(groupedMessages).each(function (index, messages) {
            console.log(index); //Expected output: 12.03.2020

            $(messages).each(function (index, message) {
                console.log(message["sender_id"]);
                console.log(message["message"]);
                console.log(message["created_at"]);
            })
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Чтобы решить вашу проблему, я бы предложил вам следующие вещи:

1. Вы не можете использовать строковые ключи для массивов, используйте объекты, если вы хотите иметь строковые ключи
2. Do не используйте $ (). each ..., поскольку он итерирует по jQuery коллекциям, вместо этого используйте встроенные js функции $ .each для итерации по js объекту или массиву.

Проверьте решение ниже

jQuery(document).ready(function ($) {
    let messages = [{
        sender_id: "0",
        message: "Test",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }, {
        sender_id: "0",
        message: "Hallo",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }];

    let groupedMessages = {};

    messages.forEach(function (message, index) {
        let createdAtDate = new Date(message["created_at"]).toLocaleDateString(navigator.language, {
            day: "2-digit",
            month: "2-digit",
            year: "numeric"
        });


        if (typeof groupedMessages[createdAtDate] === "undefined") {
            groupedMessages[createdAtDate] = [];
        }

        groupedMessages[createdAtDate].push(message);
    });

    console.log(groupedMessages);

    if (Object.keys(groupedMessages).length) 
    {
        Object.keys(groupedMessages).map(date => {
            console.log(date); //Expected output: 12.03.2020

            groupedMessages[date].map(message => {
                console.log(message["sender_id"]);
                console.log(message["message"]);
                console.log(message["created_at"]);
            })
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Проблема из-за этой строки

let groupedMessages = []

Вы устанавливаете groupedMessages как array, когда оно должно быть object. У array нет ключей в JavaScript, поэтому вы не получаете вывод.

jQuery(document).ready(function ($) {
    let messages = [{
        sender_id: "0",
        message: "Test",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }, {
        sender_id: "0",
        message: "Hallo",
        created_at: "Thu Mar 12 2020 17:26:23 GMT+0100 (Mitteleuropäische Normalzeit)"
    }];

    let groupedMessages = {};

    $(messages).each(function (index, message) {
        let createdAtDate = new Date(message["created_at"]).toLocaleDateString(navigator.language, {
            day: "2-digit",
            month: "2-digit",
            year: "numeric"
        });


        if (typeof groupedMessages[createdAtDate] === "undefined") {
            groupedMessages[createdAtDate] = [];
        }

        groupedMessages[createdAtDate].push(message);
    });

    console.log(groupedMessages);

    if (groupedMessages && groupedMessages.length > 0) {
        $(groupedMessages).each(function (index, messages) {
            console.log(index); //Expected output: 12.03.2020

            $(messages).each(function (index, message) {
                console.log(message["sender_id"]);
                console.log(message["message"]);
                console.log(message["created_at"]);
            })
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>