Can't loop over grouped array in JS

Question

Unfortunately I have again problems with my grouped messages. I have already received a lot of help from you, so I feel a bit embarrassed to ask again - but I'm not getting ahead with this.

My first goal was to group messages by their created_date. Thanks to your help this works very well now. Now I have tried to output the grouped messages, but it does not work. I slowly don't understand the whole thing anymore...

I want to output the group key (date) first and then every single message in each group. This is what I’ve tried:

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>

Cjmarkham · Accepted Answer · 2020-03-12 20:28:50Z

The issue is because of this line

let groupedMessages = []

You are setting groupedMessages as an array when it should be an object. array's don't have keys in JavaScript, which is why you get no output.

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>

Denys Oliinyk · Accepted Answer · 2020-03-12 20:29:07Z

To solve your problem I would suggest you such things:

You can`t use string keys for arrays, use objects in case you want to have string keys
Do not use $().each... because it iterates over jQuery collections, instead use built in js functions of $.each to iterate over js object or array.

Check solution below

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>

Collectives™ on Stack Overflow

Can't loop over grouped array in JS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related