This question already has an answer here:
In Angular, why doesn't line breaks affect the HTML?
(1 answer)
Closed 3 years ago.
I am not able to do a line break on \r\n with the following payload on this screen.
I am trying to find out the correct json playload, I should send to the frontend so that it's interpreted as line break.
{"allEvents": [{"data": [{"PSCPowerCableFailure": {"error_name": "patient_cart_running_on_battrey", "steps": {"1": {"step_body": {"step_link": {"type": "image", "url": "../../assets/patient-cart-running-on-battery_step_1.png"}}, "step_body_header": "Reconnect power cable to power outlet.", "step_body_text": "Confirm error is cleared on Vision Cart touchscreen. \r\nSwipe to the next troubleshooting screen if message does not clear.", "step_title": "Patient Cart Running on Battery"}, "2": {"step_body": {"step_link": {"type": "image", "url": "../../assets/patient-cart-running-on-battery_step_2.png"}}, "step_body_header": "Check circuit breaker on back of Patient Cart. Ensure that it is set to the ON (I) position.", "step_body_text": "Swipe to the next troubleshooting step if message does not clear.", "step_title": "Patient Cart Running on Battery"}, "3": {"step_body": {"step_link": {"type": "image", "url": "../../assets/exclamation-blue-circle-icon.png"}}, "step_body_header": "Call dVSTAT at 1.800.XXX.XXXX for additional assistance if required. \r\n A representative can guide you through additional troubleshooting procedures.", "step_body_text": "System Information:\r\n System Name: XXXXXX\r\n Software Version: P8d", "step_title": "Patient Cart Running on Battery"}}}, "arm_number": null, "error_display_name": "Patient Cart Running on Battrey", "error_id": "PSCPowerCableFailure", "error_name": "patient_cart_running_on_battrey", "priority": 0, "show_default": "false"}], "error_content_id": "PSCPowerCableFailure", "type": "error_occurred"}]}
Since you are using angular, you most likely download your json and bind the resulting values to some template.
There are two ways to achieve line breaks then. You can either set linebreaks via HTML <br> tag and bind the attribute to an innerHTML of an element like this:
<div [innerHTML]="retreivedJson.attributeContainingHTML"></div>
In this case you might need to use Sanitizer.bypassSecurityTrustHtml() on that attribute beforehand. An easy way to do that is to use a pipe like explained here.
Or you can send normal linebreaks with \n, in which case the element you are rendering it in needs to be a <pre> or have CSS rule white-space: pre; applied:
<pre>{{retreivedJson.attributeContainingWhitespaces}}</pre>
<!-- or -->
<div style="white-space: pre">{{retreivedJson.attributeContainingWhitespaces}}</div>
Here a Stackblitz showcasing all examples.
HTML is what's being rendered. If you want an HTML line break, you need to use an HTML tag, i.e., <br>.
If you're using a framework (e.g., Angular or Ionic), you might need to ensure your HTML tags aren't being escaped.
Related
This question already has answers here:
VSCode - wrap selected text in "<mark></mark>"
(2 answers)
Closed 2 years ago.
I'm using VS Code to edit markdown files and I'd like to create some new shortcuts, such as to highlight or underline selected texts. This can be achieved by surrounding selected text by <mark>TEXT</mark> or <u>TEXT</u>. And I want to create new shortcuts to add these tags around selected text, just like adding **TEXT** by using CTRL+B.
I know how to create snippets but don't know how to write the command of these shorcuts.
This is very simple in VSCode because it has Emmet integrated into it.
You just select the text, open the command pallet (CTRL SHIFT P) and select Emmet: Wrap with Abbreviation and write your tag and it will automatically wrap the test in that tag. you can also use Emmet class and tag syntax too.
Here is a demo:
You can set the keyboard shortcuts for this action too in VSCode. In the Keyboard Shorcut Screen you can search for Emmet wrap and change them.
this is what i can recomment as a VS Code user.
please add this snippet,
"MYmARK": {
"scope": "",
"prefix": "my mark",
"body": [
"<mark>$1</mark>"
],
"description": "mymark"
},
Then.
since you are selecting that text,
you can cut that and write "mymark" so the snippet will show. and hit enter
then paste your text and it will directly insert where $1 is located.
I have a multitude of snippets for each tag in the language I am currently programming in. I want to share these with some of my co-workers but I don't want to send them like 30 snippet files. Is there a way to condense these into one file (apart from zipping them, sending the zip and then having them unzip it).
You can use a .sublime-completions file. These are JSON-formatted files that contain the target scope at the top, then a series of completions with a trigger and contents. For example, the following snippet
<snippet>
<content><![CDATA[function ${1:function_name} (${2:argument}) {
${0:// body...}
}]]></content>
<tabTrigger>fun</tabTrigger>
<scope>source.js</scope>
<description>Function</description>
</snippet>
can be turned into this completion:
{
"scope": "source.js",
"completions":
[
{ "trigger": "fun", "contents": "function ${1:function_name} (${2:argument}) {\n ${0:// body...}\n}" }
]
}
Use \n for newlines and \t for tab characters in the "contents" section. Double quotes need to be escaped as well. Also, you can use \t to separate the trigger from a brief description on what the completion is about, it will be displayed right-aligned and slightly grayed and does not affect the trigger itself:
{ "trigger": "fun\tFunction", "contents": "function ${1:function_name} (${2:argument}) {\n ${0:// body...}\n}" }
Since this is JSON, to add multiple completions just put a comma , after the closing curly brace } of the completion, and put your next one on the next line. The final line should not have a final comma.
Good luck!
i'm using an ng-repeat directive to show a list of posts,
retrieved through a wordpress-json-api.
i have problems with some characters, as the output of wp-json-api escapes some of them.
myjson :
{
"id": 1,
"type": "mynicetype",
"slug": "myniceslug",
"title": "It’s a strange char" //my apostrophe got changed
... }
and my markup:
<li ng-repeat="post in menu.posts | filter:searchText | filter:query" >
<h4 >name : {{post.title}}</h4>
</li>
get rendered (obviously-awfully) as
name : It’s a strange char
What's the best approach for formatting these html numbers? (before assigning the json.success data to the scope or, more easily, on the fly, inside template? but how?)
(btw i don't get the reason why an apostrophe should receive a special treatment by a json-api, but i could really be misunderstanding something here)
Thanks for any clarification
Is there a way like in xml to add a html tag to json string data.
Example:
{"title": "bla bla", "copy": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"}
In my example I use an a tag to wrap some text. In xml I could just use a ctata tag to wrap the entire text.
UPDATE:
Ok so from some of your answers it looks like Json is not the route to go for data that will have html tags in it. What would be a better solution. My html pages have some simple FAQ links. When the user clicks them it will load the approperate data which would be the title and the description. All I'm trying to do is simply have a user click some FAQ titles and then it will show a popup that will be sent the page ID which I was using as my json IDS. Right now it works great with the json data but I can't add html links to the description data.
For example:
{
"intro": [
{"title": "title text", "description": "description text1"},
{"title": "title text", "description": "description text1"}
]
}
In the above example, intro is the page ID. So it can grab this array and find its appropriate title and description. After I did this I noticed some of the copy in the descriptions would have html links in them. Can anyone let me know what would be a better solution to how I setup my external data.
You could call the Javascript escape() function before inserting into your JSON. Then call unescape() on the other end.
escape() on W3Schools website
JSON is just a string, so a simple string manipulation would do the trick. You'd have to be VERY careful to not introduce any syntax errors, however. Simply adding <a href="index.php"> would break the string, as the " are JSON metacharacters. you'd have to insert <a href=\"index.php\">, and probably even double-escape those quotes, depending on how you're doing things.
If you're doing your own JSON serialization (and in most contexts you probably don't want to, but that depends on which langauge you're using), you should start by being familiar with the grammar presented on http://www.json.org/. It tells you right on the front page that double quotes in strings can be escaped with backslashes as \".
I know I'm a bit late to the party, but this is what did it for me! The "render" function takes my data in the JSON key "data" and returns the data in "dataname" as well as my desired html tag (span).
{
"data": "dataname", render: function (data) {
return data + '<span></span>';
}
},
"Other data keys to follow"
{
},
If you are trying to put a link in a json string all you need to do is write your link normally as you would in an html but instead of enclosing the href in double quote use single quote. For example
{"name": "<a href='talk.php'>Talk</a>"}
I have been looking for a way to capture structured text (sections, paragraphs, emphasis, lists, etc.) in JSON, but I haven't found anything yet. Any suggestions? (Markdown crossed my mind, but there might be something better out there.)
How about something like this:
[ { "heading": "Foobar Example" },
{ "paragraph":
[
"This is normal text, followed by... ",
{ "bold": "some bold text" },
"etc."
]
}
]
That is:
use a string for plain text without formatting or other mark-up;
use an array whenever you want to indicate an ordered sequence of certain text elements;
use an object where the key indicates the mark-up and the value the text element to which the formatting is applied.
HTML is a well-established way to describe structured text, in a plain-text format(!). Markdown (as you mentioned) would work as well.
My view is that your best bet is probably going to be using some sort of plain-text markup such as those choices, and place your text in a single JSON string variable. Depending on your application, it may make sense to have an array of sections, containing an array of paragraphs, containing an array of normal/bold/list sections etc. However, in the general case I think good old-fashioned blocks are markup will ironically be cleaner and more scalable, due to the ease of passing them around, and the well-developed libraries for full-blown parsing if/when required.
There also seems to be a specification that might accomplish this Markdown Syntax for Object Notation (MSON)
Not sure if for you it's worth the trouble of implementing the spec, but it seems to be an option.