I want to save part of my html code into json as a file then recap back the html codes for editing. Any idea how can i do it?
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label class="draggable ui-widget-content clickableLabel" id="label1" >New Text</label>
<input id='textbox1' class="clickedit" type="text" class="draggable" class="ui-widget-content" placeholder="Text Here"/>
<div class="clearfix"></div>
</div>
</div>
I am new to json, please simplified if possible.I had look at other questions but their don't seem to address my question
Parsing HTML into JSON supports loading the HTML File to transform to JSON. Click on the Upload button and select File. HTML to Plain JSON Converter Online works well on Windows, MAC, Linux, Chrome, Firefox, Edge, and Safari.
Java developers can easily convert HTML file to JSON in just a few lines of code.
Python developers can easily load & convert HTML files to JSON in just a few lines of code.
What you want to do is called serializing.
// This gives you an HTMLElement object
var element = document.getElementById('TextBoxesGroup');
// This gives you a string representing that element and its content
var html = element.outerHTML;
// This gives you a JSON object that you can send with jQuery.ajax's `data`
// option, you can rename the property to whatever you want.
var data = { html: html };
// This gives you a string in JSON syntax of the object above that you can
// send with XMLHttpRequest.
var json = JSON.stringify(data);
function htmlToJson(div,obj){
if(!obj){obj=[]}
var tag = {}
tag['tagName']=div.tagName
tag['children'] = []
for(var i = 0; i< div.children.length;i++){
tag['children'].push(htmlToJson(div.children[i]))
}
for(var i = 0; i< div.attributes.length;i++){
var attr= div.attributes[i]
tag['@'+attr.name] = attr.value
}
return tag
}
var html = $('#TextBoxesGroup')[0].outerHTML;
var temp = {"html":html};
var obj = JSON.parse(temp);
console.log(obj); // shows json object
You can use any server side language to make a json from obj.
i use recursive function to handle it
from bs4 import BeautifulSoup
dic = dict()
itt = 0
def list_tree_names(node):
global itt
for child in node.contents:
try:
dic.update({child.name +"/"+ str(itt): child.attrs})
itt += 1
list_tree_names(node=child)
except:
dic.update({"text" +"/"+ str(itt): child})
itt += 1
soup = BeautifulSoup(data, "html.parser")
data is the html text
list_tree_names(soup)
print(dic)
you can see json file in https://github.com/celerometis/html2json
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With