Javascript Getting Key and Values from Object

Question

I'm quite new javascript and am having trouble extracting data from an ajax request before loading to a webpage.

The data from the ajax request is something like:

{
"success": {
    "user1": [
        ["2018-01-30", {
            "Type": "None",
            "Body": "Message 2"
        }],
        ["2018-01-29", {
            "Type": "None",
            "Body": "Message 1"
        }]
    ],
    "user2": [
        ["2018-01-28", {
            "Type": "None",
            "Body": "Message 2"
        }],
        ["2018-01-27", {
            "Type": "None",
            "Body": "Message 1"
        }]
    ],
    "user3": [
        ["2018-01-26", {
            "Type": "None",
            "Body": "Message 2"
        }],
        ["2018-01-25", {
            "Type": "None",
            "Body": "Message 1"
        }]
    ]
}

I can extract the Type and Body data using the below code, Which lists all the items out on the webpage.

$.ajax(
        {
            url : '/ajax_get_messages',
            type: "GET",
            dataType : 'json'
        }).done(function(messages)
        {
            $.each(messages.success, function(index, message)
            {
                $('#messages').append(`
                    <div class='message'>New Sender`)

                $.each(message, function(index, item)
                {
                    $('#messages').append(`
                        <p>Date: ${item[0]} | Type: ${item[1]['Type']} | Body: ${item[1]['Body']}</p>
                    </div>`)
                });
            });
        })

What I'm struggling to do is get the user's names user1, user2 etc and put it in place of `New Sender', so all the messages from a user are grouped together in it's own div. I've looked at Object.keys but that didn't seem to be correct for this.

I'm also aware that the appending to the html isn't working correctly because of the $.each(message, function(index, item) in the middle. Is there a way around this?

This looks similar to Get key and value of object in JavaScript?. — Heretic Monkey
– Heretic Monkey, Commented Mar 30, 2018 at 16:49
The json you have pasted is throwing syntax error. You should replace it with the correct json response. — Anurag Singh Bisht
– Anurag Singh Bisht, Commented Mar 30, 2018 at 17:04

Xhynk · Accepted Answer · 2018-03-30 17:04:11Z

1

The JSON you provided is invalid, but I cleaned it up. You should be able to use the index in the first loop to get the name:

Here's an example

You can always console.log the current element in any loop to see exactly what's available to you

answered Mar 30, 2018 at 17:04

Xhynk

13.9k8 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blountdj Over a year ago

many thanks. The index worked for the username. Is there a way to make the <p> tag go inside the <div>? At the moment the <div> closes with the <p> tags outside.

Xhynk Over a year ago

Oh sorry I missed that part in the question - yes there is. If I were you, I would build the .message as an HTML object and then add it when it's done: codepen.io/xhynk/pen/Kooejw?editors=1011

Collectives™ on Stack Overflow

Javascript Getting Key and Values from Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related