5

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?

Fred
  • 1,021
  • 5
  • 13
  • 29

2 Answers2

7

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.

Sachin Bahukhandi
  • 2,378
  • 20
  • 29
Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • 3
    your answer doesn't support deep JSON nesting that will match the HTML structure. this is more of a hack, ed-hood solution. – vsync Nov 02 '11 at 20:17
  • If you would like to provide an example fail case and an alternative, then by all means, do so. However, I can think of no obvious reason why a simple string of HTML (which is, after all, just ASCII) couldn't be JSON encoded no matter what. It's just a string, it's irrelevant what "structure" is being represented by it. We're not trying to parse HTML into a javascript object structure, we're just trying to pass the whole thing to the server as a string. – Jamie Treworgy Nov 04 '11 at 08:04
  • It is not clear at all to me that this is what OP is trying to do. He asked how to get HTML out of the DOM. I told him how to do that. If he wants to parse it back into a JSON object before sending it to the server, he didn't say that. If his goal is JSON representation of HTML, he didn't say that. Given that he accepted my answer, I think there's nothing more to fix here. – Jamie Treworgy Nov 04 '11 at 12:24
  • 2
    dude, the title says HTML to JSON, what more there is to ask. I think this answer will confuse many people who are seeking HTML to JSON conversion. it's not about you getting points man. – vsync Nov 04 '11 at 12:41
  • 2
    Umm, ok. If you think you have a better answer, why don't you post it as an answer? This one is accepted. Typically, that means, it was what the OP was looking for. If you feel like trying to convince OP that this wasn't what he was looking for, go for it. I couldn't care less if he decides to un-accept this answer 3 months later. I'm not sure why you think I'm concerned about points, it's not like you can cash them in for frequent flyer miles. I answer questions because I like helping people and usually I learn something at the same time. – Jamie Treworgy Nov 04 '11 at 13:11
  • 1
    you are a very aggressive person dude..you keep attacking me instead of keeping a clean line of conversation. lets just forget it – vsync Nov 04 '11 at 13:16
0

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.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710