I have a JSON with one key with multiline value.
IĀ“m trying that pug render this in multiline with breaklines, but it shows it in a line.
https://codepen.io/anon/pen/mXjZZR
<pre>
-
var example = [
{
"company": "Orange Software",
"website": "example.com",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"services": [
"Customer experience",
"Digital strategy",
"Velocity development"
]
}
];
body
for i in example
h1 #{i.company}
p #{i.services}
</pre>
Currently all items in the services array is appended into the <p> paragraph tag, thus it is displayed in a single line.
<h1>Orange Software</h1>
<p>Customer experience,Digital strategy,Velocity development</p>
To show it in different lines, you should iterate the services array as well, and add individual array items to separate <p> paragraph elements.
for i in example
h1 #{i.company}
for j in i.services
p #{j}
Which renders to,
<h1>Orange Software</h1>
<p>Customer experience</p>
<p>Digital strategy</p>
<p>Velocity development</p>
Please let me know whether this helps.
Related
json data is coming from rest API with html tag like
(content: {rendered: "<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>āµ", protected: false})
how we convert HTML tag to text in angular7
{{x.content.rendered}} in angular 7
<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p>
display code in HTML format
The result should without HTML tag in angular6-7
Destination Covered: Lorem Ipsum; Dolor
Could you use this ? Worked for me
var f = '<p><strong>Destination Covered:</strong> Lorem Ipsum; Dolor</p> ';
var e = document.createElement("div");
e.innerHTML = f;
document.getElementById("foo").innerText = e.innerText;
Please do leme know
simply you can use databinding for innerHTML like this
componenet
hello = "<h1>Hello from š </h1>"
template
<div [innerHTML]="hello"></div>
demo š§āāļø
here's my solution:
in the file ts
bypassSecurityTrustHtml(text: string) {
return this.sanitized.bypassSecurityTrustHtml(text)
}
and in the html you should implement this html code :
<p> <span [innerHTML]="bypassSecurityTrustHtml(myForm.value.pageContent)"></span></p>
enter code here
I was wondering couple days ago if its possible to do the following.
Lets say we have a basic HTML code with the following in it:
<p class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
And we also have some CSS files that are included in the header of the HTML with basic styling like:
.someinfo{
font-size:32px;
color:red;
}
So here comes my question.
If I edit the HTML and put inside the first Paragraph (style="color:black") like down below it will change the color only for that div element.
By changing the style like this is it somehow possible to make the changes appear to all elements with that class name?
<p style="color:black" class="someinfo"> basic div </p>
<p class="someinfo"> some other information </p>
I hope you understand what I'm asking and apologise if it's a stupid question.
P.S. I am asking this because I have the following situation. There is a website that i don't have the access to any of the files on the server, cannot upload any new files. All i can do is create new pages from a text editor which doesn't recognise < style > and < script > tags. All I want to do is change some css on the navigation and on some other items that are part of every page in the website.
This is what CSS is for :) If you want all elements of a given class name to change to black you could change the CSS style to:
.someinfo{
font-size:32px;
color:black;
}
Doing it inline manually wont work.
If you really want to do it inline you could do so programatically with js:
var someInfoElements = document.getQuerySelectorAll(".someinfo");
for(i = 0; i < someInfoElements.length; i++) {
someInfoElements[i].style.color = "black";
}
Option 1
You could define the first element with a style attribute and use JS to make the rest for you, as long as all elements have the same selector.
const someInfo = document.querySelectorAll('.someinfo');
const style = someInfo[0].getAttribute("style");
someInfo.forEach((s) => s.style = style);
<p style="color:red; font-size:32px" class="someinfo"> basic text </p>
<p class="someinfo"> some other information </p>
Option 2
You could add style attributes to each element.
Here is an example:
const someInfo = document.querySelectorAll('.someinfo');
let style = '';
someInfo.forEach((s) => {
if (typeof s.getAttribute("style") === 'string') {
style += s.getAttribute("style");
if (style.slice(-1) !== ';') {
style += ';';
}
}
});
someInfo.forEach((s) => s.style = style);
<p style="color:red;" class="someinfo"> basic text </p>
<p style="font-size:32px" class="someinfo"> some other information </p>
<p style="color:blue" class="someinfo"> and more information </p>
<p class="someinfo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, soluta animi, optio repellat eius consectetur! Iure repudiandae, architecto doloremque, dolorum totam consequatur minima placeat recusandae nisi earum dignissimos, illum culpa. </p>
As you see I am using color:red and color:blue. Just like in CSS the last attribute wins. In this case the color of your element with the class someinfo is blue and all other CSS attributes and values will be added.
yes you can, if you want to change all paragraph in the div just put "p" in your css code like this: your both elements will change
p {font-size:32px;color:red;}
instead of
.someinfo{font-size:32px;color:red;}
your code will be like this
<style> p { font-size:32px;color:red;} </style>
I am creating a set of divs from a JSON object using ng-repeat that construct "note" cards. The number of cards is determined by the number of JSON objects in the array. "Type" designates the header of the card, and "Content" designates the body. However, the contents of "Content" is not consistent. In some examples, the content is merely a sentence or paragraph. In others, the content is an array. When the content is a sentence, the formatting is handled fine. When the content is an array, I end up with the actual array in text format [{"year":"2009", "operation":"caesarean"},{"year":"2010", "operation":"torn meniscus"}] as the body of the card. Any ideas of how to implement this without scripting each card individually?
HTML
<section name="patientinfo">
<div align="center" ng-controller="HistoryCtrl">
<div class="grid-container" ng-repeat="record in historyItems">
<div class="row" row>
<div class="col-2" ng-repeat="history in record.History">
<div class="note" draggable="true">
<div class="row" id="rowhead3">
<div class="col-6" >
<span class="note-header">{{history.type}}</span>
</div>
</div>
<div class="row">
<div class="col-6" style="overflow: auto; height:250px;">
<div>
<span class="note-content">
{{history.content}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
JSON Example (the actual JSON is huge). There are many other entries besides "history". Also, these notes are not from a real person, so don't worry.
"History": [
{
"type": "medical",
"content": [
{
"condition": "IBS"
},
{
"condition": "Torn Meniscus Right Knee"
},
{
"condition": "Seasonal Allergies"
}
]
},
{
"type": "SOCIAL HISTORY",
"content": "Lives with husband and 3 children. No history of violence, domestic violence, or rape. Feels safe at home and in relationship. ETOH on weekends (socially 4 drinks in one weekend occasionally) and occasionally smokes cigarettes and marijuana. Admits to very rare marijuana on special occasions."
}]
Example of what I'm ending up with:
http://i.stack.imgur.com/MtuBN.png
You should transform or augment the data into a new format where you have the following structure for each note:
{
type: "string",
contentType: "(text|list)",
content: "string" // OR array of strings
}
To do this, you will need to have custom logic to transform each object in the array to a single string.
Then just use an ng-switch on the contentType attribute to decide which markup to use (e.g. a <ul> if contentType is list).
I make a small tour company site right now.
I want to describe the activity of each of a given trip -
Each 3 days has to be wrap inside a div with span-4 class as follow:
<div class ="span-4">
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
<h3>Day 1</h3>
<h4>Departure and arrival</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.....</p>
</div>
I use data folder and loop as follow inside my yml file:
{% for groups in site.data.tak-lampang %}
<div class="span-4">
{% for d in groups.day %}
<h3>{{d.title }}</h3>
<h2 class ="fi-marker">{{ d.direction }}</h2>
<p>{{ d.description }}</p>
{% endfor %}
</div>
{% endfor %}
My yml files look like this
- groups:
day:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
day:
- title: "Day 2"
direction: "B-C"
description:"Lorem ipsum....."
day:
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
My output is this
<div class ="span-4">
<h3>Day 3</h3>
<h4>C-D</h4>
<p>Lorem ipsum...</p>
</div>
I kind of stuck now after many tries.
Can someone point out where my mistake is ?
Two things : an error in yaml data file and a small refactoring
The error
Your assigning three time a value to the same key :
- groups:
day:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
day:
- title: "Day 2"
direction: "B-C"
description:"Lorem ipsum....."
day:
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
groups.day can have only one value and in this case it's Day 3.
Correct organization of your data file can be :
groups:
days:
- title: "Day 1"
direction: "A-B"
description: "Lorem ipsum......"
- title: "Day 2"
direction: "B-C"
description: "Lorem ipsum....."
- title: "Day 3"
direction: "C-D"
description: "Lorem ipsum ...."
The refactoring
In your loop, you do {% for groups in site.data.tak-lampang %}. This means that you will have to replicate your code for each destination. If one day you want to change your html, you'll have to change it in every files.
It's better to abstract this to an include template.
1 - datas
Your data file is tak-lampang.yml. See code above.
2 - Tour page
The tour page is tak-lampang.html or whatever you want. It contains :
---
title: Tak Lampang dream tour
layout: default
dataFile: tak-lampang
---
{% include destinationDisplay.html %}
That's it !
3 - Display template
Now the display template _includes/destinationDisplay.html :
<div class="span-4">
{% for day in site.data[page.dataFile].groups.days %}
<h3>{{day.title }}</h3>
<h2 class ="fi-marker">{{ day.direction }}</h2>
<p>{{ day.description }}</p>
{% endfor %}
</div>
Note the site.data[page.dataFile].groups.days that grab the correct datas depending on your page.dataFile variable in tak-lampang.html.
You can now change your display code in one file and that's good for maintenance ;-).
Good trip with Jekyll.
groups: day:
title: "Day 1" direction: "A-B" description: "Lorem ipsum......"
title: "Day 2" direction: "B-C" description:"Lorem ipsum....."
title: "Day 3" direction: "C-D" description: "Lorem ipsum ...."
try with this
I'm having trouble trying to loop through my JSON data with an a assemble site setup in the following structure:
-src
--content
---index.hbs
--data
---steps-data.json
--partial
---steps.hbs
The index.hbs in the content calls the partial passing through the object like so:
{{> steps steps-data}}
My steps-data.json file looks like so:
{
"steps":[{
"index": 1,
"title": "Find a product",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 2,
"title": "Track its price",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
},{
"index": 3,
"title": "Purchase",
"description": "Go to a product page and click on the +PriceTrack short cut to add to your list."
}]
}
In my steps.hbs i've tried looping through the JSON data but its not.
<div class="g-col g-span4">
{{#each steps-data.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>
The problem I have is that its not looping through and not sure what I'm doing wrong.
Since you passed steps-data into the partial as it's context, you can access steps directly or with this.steps:
<div class="g-col g-span4">
{{#each this.steps}}
<div class="working-step">
<span class="number"></span><h3>{{title}}</h3>
</div>
<p>{{description}}</p>
{{/each}}
</div>