Jump to content
dustcomposer

get HTMLcodeAsString from json

Recommended Posts

Hi, I have this following code:

 

http://jsfiddle.net/dustcomposer/bapwnhy0/

var cresc_path = '<path class="dyna_line" id="dyna_line" d="M ' + 0 + ' ' + 0 + ' L ' + 50 + ' ' + 25 + ' M ' + 0 + ' ' + 50 + ' L ' + 50 + ' ' + 25 + '" style="stroke-width: 1; stroke: red; fill:none;" />';var dl = document.createElementNS("http://www.w3.org/2000/svg", "svg");dl.setAttribute('class', 'dyHolder');dl.setAttribute('id', 'dyHolder');dl.setAttribute('style', 'border:1px solid red');dl.setAttribute('width', '50');dl.setAttribute('height', '50');dl.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");dl.innerHTML = cresc_path;document.getElementById('a').appendChild(dl);var str = '<svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: red; fill:none;"></path></svg>';document.getElementById('b').innerHTML = str;

both dl and str does result a svg image in html page. but when I grab similar string with str from json file, it appears as text like:

 

<svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: black; fill:none;"></path></svg>

 

can anyone explain what the problem is?

 

UPDATE:

 

I've found the problem!

the saved json structure must be typed neat. If the json structure made like this:

[[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]]

the svg (as string) won't appears as svg but a paragraph/text. therefore it should written like this:

[[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]]

Everything works well now.

 

 

 

 

 

Edited by dustcomposer

Share this post


Link to post
Share on other sites

 

but when I grab similar string with str from json file, it appears as text

 

Grab how? Display how?

Share this post


Link to post
Share on other sites
Hi, I'm using fileReader to load .txt file contains json. It works, apparently, when I parsed it, the <svg> tag doesn't show a svg image, it appears as text.
Here's the json:
[["24/11/2014 - 4:32", "blah", "blah blah", "blah blah blah"],[ "<svg class="dyHolder" id="dyHolder" style="1px solid red" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 5 L 140 0 M 0 5 L 140 10" style="stroke-width: 1; stroke: black; fill:none;"></path></svg>", "", ""]]
and the result:
This is text Lorem Ipsum blah blah <svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: black; fill:none;"></path></svg>. Another text..

Share this post


Link to post
Share on other sites

If you mean html code as string with attributes and value within open closing quotes, this will break syntax for the normal creation of json string to exchange data, you should only send as a single data with a key as ref similar to

        <div id="demo"></div>        <script type="text/javascript">            var text = '{"svg_class_id": "dyHolder", "svg_style": "border:1px solid red", "svg_width": "50", "svg_height": "50" ,"svg_xmlns": "http://www.w3.org/1999/xlink", "path_class_id": "dyna_line", "path_d": "M 0 0 L 50 25 M 0 50 L 50 25", "path_style": "stroke-width: 1; stroke: red; fill:none;"}';            var obj = JSON.parse(text);            document.getElementById("demo").innerHTML = '<svg class="' + obj.svg_class_id + '" id="' + obj.svg_class_id + '" style="' + obj.svg_style + '" width="' + obj.svg_width + '" height="' + obj.svg_height + '" xmlns:xlink="' + obj.svg_xmlns + '"><path class="' + obj.path_class_id + '" id="' + obj.path_class_id + '" d="' + obj.path_d + '" style="' + obj.path_style + '"></path></svg>';        </script>

the html coding should created for the insertion of data from json only.

Share this post


Link to post
Share on other sites

hi, thanks dsonesuk. It would work for me, I have to run some test first; in my case, the svg images are created by users with their own numbers of dimension and style, and what makes it little bit more complicated is that users have a chance to create more than one 1 image to be appended on vary div as holder, my job is to get those svg image to a json file where other inputs also stored there too.

 

I thought it would be easier if I can just get innerHTML of divs to stored svg images in a json, but then I found this info: create an SVG DOM tree from JSON, SVG 2 DOM/JSON Constructors; I think this is exactly what I need, but as the page says, there is no easy way to achieve this, json is a bad option to construct svg image.

 

however, I will try your solution, I have created this new structure to try:

[[{"parentId":"", "class":"svg", "id":"svg1", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path1", "d":"", "stroke":"", "stroke-width":"", "fill":""}],[{"parentId":"", "class":"svg", "id":"svg2", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path2", "d":"", "stroke":"", "stroke-width":"", "fill":""}],[{"parentId":"", "class":"svg", "id":"svg3", "width":"", "height":"", "border":"", "xmlns:xlink":""},{"class":"path", "id":"path3", "d":"", "stroke":"", "stroke-width":"", "fill":""}]]

Have a look at this nice free online json editor.

 

but it would take some time for me. Thanks again.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...