creating json from DOM elements using jQuery

Question

If I have the following DOM elements

<div class="item">content1</div>
<div class="item">content2</div>

how, using jQuery and Javascript, do I construct a JSON object like the following?

[{ 
'classname': 'item',
'content': 'content1'
}
{
'classname': 'item',
'content': 'content2'
}]

Any recommended further reading?

Why do you want to do this? Sometimes the best representation of the data is the data itself. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 29, 2012 at 19:55
I'm trying to construct a JSON table like that used here: links.sourceforge.net/timeline/js/examples/… But instead of writing the html in the json object directly, I wanted to write the html in the DOM, and then construct the json object. Is this the best way of going about it? — bento
– bento, Commented Mar 29, 2012 at 20:04
This is the object he uses in the example, but it seems messy to write the html as such. ta = [ { 'start': new Date(2010,7,23), 'content': 'Conversation<br><img src="img/comments-icon.png" style="width:32px; height:32px;">' }, — bento
– bento, Commented Mar 29, 2012 at 20:07

gen_Eric · Accepted Answer · 2012-03-29 20:08:18Z

7

var data = $('div.item').map(function(){
    return {
        classname: 'item',
        content: $(this).text()
    };
}).get();

DEMO: http://jsfiddle.net/nDE7e/

answered Mar 29, 2012 at 20:08

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

4 Comments

bento Over a year ago

Nice. What are the merits of doing it this way over using .each() ?

gen_Eric Over a year ago

.map will return you an array, instead of having to make one beforehand.

Adrien Schuler Over a year ago

Nice approach. It looks like you can get rid about the last .get().

gen_Eric Over a year ago

@aschuler: The .get() is there so that you're returned an array. Otherwise, you're returned a jQuery object.

Adrien Schuler · Accepted Answer · 2012-03-29 20:04:56Z

2

http://jsfiddle.net/24JjD/

var datas = [{ 
    'classname': 'item',
    'content': 'content1'
    }, {
    'classname': 'item',
    'content': 'content2'
    }
];

$.each(datas, function(key, value) {
    $('body').append('<div class="'+value.classname+'">'+value.content+'</div>');
});

Correct answer :

http://jsfiddle.net/tS9r5/

var datas = [];

$('div.item').each(function() {
   var data = { 
       classname: this.className, 
       content: $(this).text()
   };
   datas.push(data);
});

console.log(datas);

edited Mar 29, 2012 at 20:04

answered Mar 29, 2012 at 19:56

Adrien Schuler

2,4251 gold badge22 silver badges32 bronze badges

Comments

jrummell · Accepted Answer · 2012-03-29 19:55:11Z

0

You can loop over the item divs and add objects to an array.

var items = new Array();

$("div.item").each(function() {
   var item = {classname: this.className, content: $(this).text()};
   items.push(item);
});

answered Mar 29, 2012 at 19:55

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

Collectives™ on Stack Overflow

creating json from DOM elements using jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related