CODEWITHSUNDEEP
javascriptjqueryhtmljson
Fred
Fred

Reputation: 1031

jQuery HTML to JSON

I'm using the jQuery template plugin to generate HTML from JSON data which the user than manipulates (and, potentially alters). I'm looking for a way to read this html back into JSON so I can save it back to my server. jQuery offers a $.tmplItem() method which returns the originally set data JSON but I'm wondering how I can get the values as they are in the current DOM?

Upvotes: 5

Views: 32311

Answers (2)

Jamie Treworgy
Jamie Treworgy

Reputation: 24334

How about this?

http://jsfiddle.net/mWuHe/14/

Pull out the HTML of your area, then convert it back to JSON:

$(':button').click(function() {
    $('#output').text(JSON.stringify({ 
        data:$('#input').html() 
    }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable="true" style="border: 1px solid;width:300px; height:100px;"><b>Edit me!</b> You can use CTRL+B to change bold, ctrl+I to change italics.</div>
<div style="clear:both;">
    <input type="button" value="Get HTML">
</div>
<div id="output" style="border: 1px solid;clear:both;width:300px;height:100px;font-family:courier;font-size:10px;">

</div>

btw I used JSON.stringify for simplicty, but in a production environment you should probably use a library like jquery-json, since some old browsers that don't support that are still skulking around.

Upvotes: 7

Matt Ball
Matt Ball

Reputation: 359826

The nicest way to get this done will be some sort of data binding, such as the jQuery data link plugin or (perhaps a bit much for your current needs) Knockout.

Upvotes: 0

Related Questions