JSON, Array push function does not work with a key defined by a variable

Question

My idea is get html data to a json or array from div which has contenteditable and data-type attribute. This is what i did JSFiddle

I want get all elements with same data-type attribute which looks like:

data = {
'title': [{content: 'Value'}],
'content': [{content: 'Value'},{content: 'Value'}]
}

But I'm stuck when using push function. Can anybody give me an idea?

Answer 1

Change data from Array to Object , and add to it title , and content properties as Array , like so

var data = {}, i = 1;

$('#get').on('click',function(){
    data = {
        title: [],
        content: []
    };

    $.each($('div[contenteditable="true"]'),function(id, value){
        var key = $(this).data('key'), 
            html = $(this).html();

        data[key].push({content: html});
        i++;
    });

    console.log(data);
});

Example

Answer 2

Use Array.prototype.push to append elements to arrays , not any old object.

For example, in the object in your example...

data = {
    'title': [{content: 'Value'}],
    'content': [{content: 'Value'},{content: 'Value'}]
}

... you have two arrays:

data.title
data.content

To push a new object onto the end of data.title , you can do this:

data.content.push({Content: 'Value'});

Now your original data object looks like this:

{
    'title': [{content: 'Value'}],
    'content': [{content: 'Value'},{content: 'Value'},{content: 'Value'}]
}