Using HTML within a JSON Object - javascript

I'm working on an FAQ type project using AngularJS. I have a number of questions and answers I need to import into the page and thought it would be a good idea to use a service/directive to load the content in dynamically from JSON.
The text strings are quite unwieldily (639+ characters) and the overall hesitation I have is adding HTML into the JSON object to format the text (Line breaks etc).
Is pulling HTML from JSON considered bad practice practice, and is there a better way to solve this? I'd prefer to avoid using multiple templates but it's starting to seem like a better approach.
Thanks

If you're using AngularJS and already have a build step, html2js could help you with turning HTML templates into JS, which can then be concat'd and minified.

You could try parsing the incoming JSON before sending it to the page and just adding in a <br /> everywhere you run into a \n. That way the JSON is more universally usable if you ever decide you want to port the data to another medium.

Related

How to convert Netscape-Bookmark-File-Format into well formed XML to manipulate

I have exported Netscape-Bookmark-Files as .html from Chrome, IE, and Firefox. These files are similar. Is there a way to convert this .html file into well-formed XML, for example, to view it in a TreeView in WPF? Or is there a workaround for that?
Maybe there is a better way to exchange Bookmarks under the Browsers which I don't know. Something like the JSON Files maybe....
I have to do a Project(C#) in which I have to program a little Bookmark Manager which I can Import and Export this HTML files as well as my own Bookmarks which are saved in a Database.... Do you have a better idea for this?
Please help me....
Regards
But i dont have JSON Files. I only have this f...ed up Netscape Bookmark File Format to work with. There is no Documentation for this Format. Only a poor one on Microsoft....
Treat each HTML <DT> tag like a new line.
In whatever language you have access to wrap each new line into a format that jstree.js can read so you end up with format as described here,
or simply use:
[{ id:lineCount, text:linedata},{rince and repeat}]
Then in whatever page you are using to display your tree load the json and you are good to go. Be careful you do not publish it openly as this writer would be concerned about any embeded authorization codes.
Another level of tricky would be to make each heading a parent. So in your preprocess you would create children object according to the above spec. As simple directory like re-entrant method (like you were going through a directory tree) would be able to child each group.
Then you would have
[{ id:lineCount, text:linedataParent, children[{id:lineCount, text:child, rince and repeat}, id:lineCount, text:nextParent, children:[{..and so on..}]...}]
Resulting in a somewhat nicer jsTree with parent/children the way you intended when you did your bookmark management.
Pretty sure this wont get voted best answer but it might be a start for you.

Angular translate UTF8 characters (pascalprecht.translate)

I am having problems with UTF8 characters while using SanitizeValueStrategy('sanitize'). I have to use it since the client is using the language files to edit texts and he might use tags like <b> or <i>...
I need to use only the json file for translations. The client won't touch the app code to change any text. JSON file:
{
"H1": "Typy domů",
"NAME": "Křestní"
}
The problems, thought, only occurs while using angular's interpolation:
<h1 translate>houseTypes.H1</h1>
Typy domů
I can use this method to put text inside of element's body, but this problems still occurs for attributes.
<input placeholder="'houseTypes.NAME'|translate"></h1>
Křestní
The questions is:
How can I get UTF8 characters to be written correctly, while only using the JSON static file loader in interpolations, or any other way in attributes as is placeholder.
For anyone struggeling upon finding way how to make UTF-8 character normal even in {{interpolations}}, this is the way to do it:
$translateProvider.useSanitizeValueStrategy('sanitizeParameters');
This way the sanitize will be always made even in interpolations.
You have two options:
Use the strategy sanitizeParameters which will only sanitize the dynamic parameters, but not the actual translation (template). If you have the translation under control (but not the dynamic values), this will work.
Use the strategy escape (or escapeParameters) which does not use sanitization but escaping.
For me the problem was solved when i set SanitizeValueStrategy to null
$translateProvider.useSanitizeValueStrategy(null);

How should I parse XML-like data in JavaScript?

I have data sets similar to this:
<NDL>
<REPLICA 4925770B:0025BA85>
<VIEW OF64623968:A2336DB0-ON49256C46:002ACF42>
<NOTE OFA52D3E8C:0ED3F84A-ON605F586A:5D1C1FAA>
<HINT>CN=YW8LN6/O=TDK-JP</HINT>
<REM>Database 'Shunya Sato', View '受信ボックス', Document '[Requirement management system - Feature #125] (New) Collect example of LN link'</REM>
</NDL>
I need to retrieve the content enclosed by the <HINT> tag, and the pseudo-attributes in the , and tags. Is there some lib that could help me out with this, or is the best way to hope that everything will always be in this order and use split/find/other builtin stuff?
Unfortunately, unless you write a custom parser that can turn what you have into XML, you won't be able to use any traditional XML libraries to read your data. The only reason that people can perform XML queries over HTML is because there are clearly defined ways to convert HTML into a DOM, which can then be converted into XML. The same cannot be said for your data.
While your data may resemble XML, the only thing it has in common is the use of < and > to delimit fields. As such, you are probably just better off using string searching and spliting to get the fields you need.

Keeping transmission down to a minimum with javascript

Has anyone ever worked with a system of passing back say, some JSON data and using a javascript routine to generate the HTML to save on bandwidth?
What methods are there and are there any templating systems available?
Start with John Resig's JavaScript Micro-Templating.
Some like it, some hate it, but you can create templates of HTML in string form within your base application package (e.g., the js files included in the main page.)
var fooTemplate = "<div class='%div_class_parent%'>"+
"<div class='%div_class_child%'/>"+
"</div>";
then you just load that into an existing DOM node using the innerHTML method.
document.getElementById('someNode').innerHTML = parseFooTemplate();
where parseFooTemplate returns fooTemplate with the %% elements replaced with correct data that was returned from the JSON.
This is just one of many ways to go about it. The dojo toolkit has their own way where widgets can have a HTML template behind the scenes. There's too many ways to enumerate here.
To generate HTML basing on JSON you will need some template engine for javascript
I would reccomend Zparse template engine http://code.riiv.net/zparse/ it is really great - i using it a lot.
The best part - you can extend it easily by declaring your own tags.

Using an HTML snippet for a template in JavaScript (jQuery)

I currently am working on a little app that requests user info from my server and displays them using a special template.
At first, I just hardcoded the little snippet in jQuery:
$("<li><div class='outer'><table><tr><td rowspan=2 class='imgcontainer'><img class='thumb'/></td><td><span class='username'/></td></tr><tr><td><span class='name'/></td></tr></table></div></li>")
I clone it several times.
It's ugly and I want it to have syntax highlighting and whatnot, so it would be better for me to have it in the HTML file itself.
Also, it will make merges easier so somebody can just change a line or two.
Is there a pattern for this? Am I OK putting it in the HTML file that I include this JS in (there's only one), and making it hidden using CSS.
The third option I thought of is just creating a separate HTML file and having jQuery request that from the server to keep it separate. Is this technique used much?
Also, is there any term I can use to describe what I'm doing? (It's harder to ask a question for a concept I don't know the name for)
I gave a similar answer on SO earlier today. What you are looking for is called micro-templates. John Resig posted this on his blog. Essentially you can get a json dataset and apply a template to the data to create html and update the DOM.

Categories