I know I could do this by simply copying the files over, changing the names (adding a language code like "about" versus "about_es", or "contact" versus "contact_es") and basically redirecting them to a different site altogether, but I was wondering how to go about doing this like the Elder Scrolls website does it (URL is the same). It seems like that method would be more elegant/professional.
Any ideas?
you can create resource JSON or XML file
ex1:
<languages>
<language id="EN">
<element name="page_head" >Hello world</element>
<element name="page_footer" >goodbye world</element>
</language>
<language id="FR">
<element name="page_head">Bonjour tous le monde</element>
<element name="page_footer">Heureux voir tous le monde</element>
</language>
</languages>
ex2:
a=[{
"language":"EN",
"elements":
{
"page_head":"Hello world",
"page_footer":"goodbye world"
}
},
{
"language":"EN",
"elements":
{
"page_head":"Bonjour tous le monde",
"page_footer":"Heureux voir tous le monde"
}];
or maybe you can just use a lazy way aka "databases"!
Related
I want to get the information from ski-equipments.ts to be displayed in app.component.html
I need to import skiEquipmentsData from ski-equipments.ts to app.component.ts
ski-equipments.ts and then write some code so I could use the information in app.component.html
ski-equipment.ts
export const skiEquipmentsData = [
{
"id": 1,
"header": "Nybörjarpaketet",
"description": "Detta är ett perfekt paket för dig som inte är så van vid att åka, men ändå vill få ut det mesta möjliga av din tid i backen",
"extendedDescription": "Paket består av:<p><ul><li>Skida: Atomic Performer FB</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Nordica Trend LX 20/21</li></p>",
"imageUrl": "/assets/images/beginner.png"
},
{
"id": 2,
"header": "Medelpaketet",
"description": "Om du har åkt en del och vill ha en lite mer avancerad utrustning ska du välja detta paket. Här får du den bästa kompromissen mellan lättåkta skidor och bra prestanda.",
"extendedDescription": "Paket består av:<p><ul><li>Skida: Atomic Redster WT</li><li>Bindning: M10 GripWalk</li><li>Pjäxa: Atomic Hawx Magna 100 21/22</li></p>",
"imageUrl": "/assets/images/medium.png"
},
{
"id": 3,
"header": "Expertpaketet",
"description": "När du vill ha det bästa som går att få för att känna att din skidåkning kan nå nya höjder är detta paketet för dig. Med denna topputrustning garanterar vi att du kommer att få en riktigt minnesvärd tid i backarna.",
"extendedDescription": "Paket består av:<p><ul><li>Skida: Rossignol BlackOps Stargazer (Open) 21/22</li><li>Bindning: Touring Bindings Marker Alpinist 10 21/22</li><li>Pjäxa: Rossignol Alltrack Elite 90 GW (98 mm) 21/22</li></p>",
"imageUrl": "/assets/images/expert.png"
}
];
app.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
I also need to make a button after every "card" in app.component.html that shows the current id from ski-equipment when it is clicked
app.component.html
<br>
<div class="column">
<div class="card">
<h3></h3>
<p>Some text</p>
<p>Some text</p>
<button>Click me</button>
</div>
</div>
<br>
<div class="column">
<div class="card">
<h3>Card 2</h3>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<br>
<div class="column">
<div class="card">
<h3>Card 3</h3>
<p>Some text</p>
<p>Some text</p>
</div>
Introduction
Seems like you are asking two question:
How to display a list in an Angular component (it is not clear whether AngularJS or Angular2)?
How can I make a button that displays data after it is clicked in Angular?
I will try to answer both of them, assuming for both that you are using Angular2. I will also add a small explanation about components.
Angular components
According to Angular documentation about components,
Components are the main building block for Angular applications
A component has view (html and css files) and logic (ts file), encapsulated in a folder.
When you create an angular app, you start with a component called app. That includes the "app" folder, which contain app.ts and app.html files. I would not suggest to start coding in this component unless you really need to. Instead, create components with specific responsibilities. In your case, you may want to create a "ski-equipments" component, which responsibility is, for example, to display ski equipment available in your store
You normally create components using the command line. If you run ng g c ski-equipments in the root folder of your app it will create a folder "src/app/ski-equipments", which will contain ski-equipments.ts, ski-equipments.html, ski-equipments.css and ski-equipments.spec.ts (this last file is for testing, if you are just starting to use Angular I would suggest to delete it). Also, it will modify your app.module, to let your app know where to look for that component.
Once you create your ski-equipments component, you can show it in your app.component.html by adding <app-ski-equipments></app-ski-equipments>. This works because your component view (html file) is not just regular HTML, but a template (more on that below).
How to display a list in an Angular component?
In Angular you write components views using templates, as per Angular documentation:
A template looks like regular HTML, except that it also contains Angular template syntax, which alters the HTML based on your application's logic and the state of application and DOM data.
Template syntax can be used to show a list in the component's view. You can use the structural directive NgForOf for displaying in your component view (.html file) a list that you have in your component logic (.ts file)
Let s assume you created a ski-equipments component. Inside ski-equipments.ts you have a SkiEquipmentsComponent class. You can initialize your skiEquipmentsData array there. It will look something like this:
// imports ...
#Component({
selector: 'app-ski-equipments',
templateUrl: './ski-equipments.component.html',
styleUrls: ['./ski-equipments.component.css']
})
export class SkiEquipmentsComponent {
skiEquipmentsData = [
{
"id": 1,
"header": "...",
"description": "...",
"extendedDescription": "...",
"imageUrl": "..."
}
// other elements of the array
]
}
Now that you have the list in your component logic, you can just show it by referencing it in your component view, using template syntax. Your ski-equipments.component.html will look something like this:
<!-- ngFor is the shortened form of NgForOf mentioned above -->
<div *ngFor="let skiEquipment of skiEquipments">
<!-- for template syntax anything inside the brackets {{}} is considered an expression, and will try to solve it by looking in the component logic -->
<p>{{skiEquipment.id}}</p>
<p>{{skiEquipment.header}}</p>
<p>{{skiEquipment.description}}</p>
<!-- ... -->
</div>
How can I make a button that displays data after it is clicked in Angular?
I do not have much time left to finish my answer, so I will just refer you to the Event Binding documentation.
In summary, you just want to add (click)="aFunctionInYourComponentLogic()" in the template HTML element of your button.
For that function to show the id of the ski-equipment, there are many ways. Maybe a simple one will be to just make visible a containing that info you want to display.
For a django project i need to generate from the Django Website a kind of complex Word document.
I started using Docx-Template that do the job great but i encountered a problem:
For certain "spot" in the word template i need to brake Django rich texte (HTML) in something usable for Docx Template
So i went into transforming my richtext in a list that can have two types of elements (to keep the order of the blocs) : ["some paragraphs","('list',['first elt of the list for bullet','second','ect...")]
For now i have two function : one that break the HTML and one that transform it
My "HTML Breaking function" is like that :
def decoupe_html (raw_html):
soup=BeautifulSoup(raw_html,"html.parser")
arbre=[]
#decoupe en grand bloc HTML
for elt in soup:
arbre.append(elt)
print(arbre)
#On parcours chaque elt pour le transformer en truc compréhensible par Word dans une liste
for elt in arbre:
#recup du tag de début du "chunk"
tag=elt.name
#traitement des paragraphe de texte
if tag == "p":
texte=elt.text
place=arbre.index(elt)
arbre[place]=texte
#traitement des listes
elif tag == "ul":
list_elt=[]
enfants = elt.findChildren()
#on récupère tous les elt de la liste
for chld in enfants:
list_elt.append(chld.text)
place=arbre.index(elt)
arbre[place]=("list",list_elt)
return(arbre)
But i have trouble in "breaking" more complex list with multi level like for example this html :
<p>pfoizepfkjze</p>
<ul>
<li>blabla
<ul>
<li>bla2
<ul>
<li>bla3
<ul>
<li>bla4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>rebla</li>
</ul>
what should i change in my code to keep my data structure and get for example :
arbre = ['pfoizepfkjze',('list',['blabla',('list',['bla2',('list',['bla3',('list',['bla4'])])]),'rebla'])]
Thanks all for your help :)
I'm performing an http call to get an RSS feed from a newspaper xml feed from latin america and then transform the response body to JSON.
The problem with latin american papers are newspapers is common to find latin characters that need to be encoded, such á é í ó ú.
The problem is that the response is not encoded properly so I get description like this one:
Las lluvias llegar��an a la ciudad de C��rdoba jueves y viernes seg��n prev�� el Servicio Meteorol��gico Nacional (SMN)
I've tried setting encoding parameters for the http component and the xmljson marshal and neither of both work. I also tried forcing Content-Type headers for application/rss+xml; charset=utf-8 and application/json; charset=utf-8 but neither.
I'm using the following DataFormat:
<dataFormats>
<xmljson id="xmljson"/>
</dataFormats>
And my route is as follows:
<route id="rss">
<from uri="direct:rss"/>
<setHeader headerName="CamelHttpUri">
<simple>"http://srvc.lavoz.com.ar/rss.xml"</simple>
</setHeader>
<setHeader headerName="CamelHttpMethod">
<constant>GET</constant>
</setHeader>
<to uri="http://rss"/>
<marshal ref="xmljson"/>
</route>
An example response would be:
{
"channel": {
"title": "LaVoz",
"link": "http://srvc.lavoz.com.ar/rss.xml",
"description": [],
"language": "en",
"item": [
{
"title": "��Se vienen las lluvias a C��rdoba?",
"link": "http://srvc.lavoz.com.ar/ciudadanos/se-vienen-las-lluvias-cordoba",
"description": "Las lluvias llegar��an a la ciudad de C��rdoba jueves y viernes seg��n prev�� el Servicio Meteorol��gico Nacional (SMN) aunque se mantendr�� el promedio de las temperaturas.�� Este martes estuvo cielo algo nublado con una temperatura m��nima de 14�� registrada a las 6.10 y una m��xima de 29,5�� a las 15.30, seg��n indic�� el Observatorio Meteorol��gico C��rdoba.�� Pron��stico extendido Hay probabilidad de tormentas para jueves y viernes. Mir�� el pron��stico.�� Ciudadanos",
"pubDate": "Tue, 14 Feb 2017 21:19:21 +0000",
"dc:creator": {
"#xmlns:dc": "http://purl.org/dc/elements/1.1/",
"#text": "redaccionlavoz"
},
"guid": {
"#isPermaLink": "false",
"#text": "1099119 at http://srvc.lavoz.com.ar"
}
},...
Update:
- If the route returns the XML response (without marshalling it into JSON) the encoding works as expected.
- If instead of marshalling the route logs the body content with the XML response into a logger the problem also appears.
A friend was able to solve it by converting the body to String with convertBodyTo using UTF-8 before marshalling.
The end code looks like this:
<route id="rss">
<from uri="direct:rss"/>
<setHeader headerName="CamelHttpUri">
<simple>"http://srvc.lavoz.com.ar/rss.xml"</simple>
</setHeader>
<setHeader headerName="CamelHttpMethod">
<constant>GET</constant>
</setHeader>
<to uri="http://rss"/>
<convertBodyTo type="String" charset="UTF-8" />
<setProperty propertyName="CamelCharsetName">
<constant>utf-8</constant>
</setProperty>
<marshal ref="xmljson"/>
</route>
I am using angularjs http to get an xml from the server, i am using node xml2json plugin to convert it to a json object. I get the document returned properly but it doesn't look right because i has html tags in the xml document. If anyone knows how to convert the returned json properly that would be great,
var x2js = new X2JS();
var dom = x2js.xml_str2json(chr);
<my_data>
<p class="justify">
El
<strong>
<em>
Content Tour 2015
</em>
</strong>
<strong>
Distributors
</strong>
</p>
</my_data>
I am still trying to figure this computer programming stuff out, i have only been coding a few months, so please excuse my bad code and kind of dumb questions, but if anyone knows how to parse the json or xml to html, i will be very grateful.
// Add your javascript here
$(function(){
$("body").append('<notas> <copete>Editorial</copete> <titulo>grande</titulo> <seccion>Opinion</seccion> <cuerpo> <p class="rtejustify"> El <strong> <em> Foro Infochannel Tour 2015 </em> </strong> concluyó en días pasados en la hermosa ciudad de Oaxaca, Oaxaca. El escenario para concluir el recorrido no pudo ser mejor. </p> </cuerpo> </notas>')
});
check plunkr --
plnkr.co/edit/nlEzvOeqwyGx7FwlFIEI?p=preview
I'm trying to xpath parse an HTML document containing the following line:
<td class="ficha ficha_izq">Emisiones de CO<sub>2</sub> (gr/km)</td>
I'm using scrapy, and the result is:
[<Selector xpath='//td[contains(#class,"ficha_izq")]/node()' data=u'Emisiones de CO'>, <Selector xpath='//td[contains(#class,"ficha_izq")]/node()' data=u'<sub>2</sub>'>, <Selector xpath='//td[contains(#class,"ficha_izq")]/node()' data=u' (gr/km)'>]
so, three items instead of just one. I don't mind about the tag, so how would I get a single item containing:
Emisiones de CO2 (gr/km)
This is not a single case, I've several items containing the tag, so I need some programatic solution.
Any clue?
thanks!!
NOTE: Using text() instead of node() does not help:
[<Selector xpath='//td[contains(#class,"ficha_izq")]/text()' data=u'Emisiones de CO'>, <Selector xpath='//td[contains(#class,"ficha_izq")]/text()' data=u' (gr/km)'>]
This xpath should work //td[contains(text(),'Emisiones de CO')]/node()
Use w3lib.html.remove_tags. You can use it with an ItemLoader.
In [1]: html = '<td class="ficha ficha_izq">Emisiones de CO<sub>2</sub> (gr/km)</td>'
In [2]: sel = Selector(text=html)
In [3]: map(remove_tags, sel.xpath('//td').extract())
Out[3]: [u'Emisiones de CO2 (gr/km)']
Alternatives using XPath or CSS selectors:
In [4]: u''.join(sel.xpath('//td[contains(#class,"ficha_izq")]//text()').extract())
Out[4]: u'Emisiones de CO2 (gr/km)'
In [5]: u''.join(sel.css('td.ficha_izq ::text').extract())
Out[5]: u'Emisiones de CO2 (gr/km)'
Notice the space between td.ficha_izq and ::text, and that ::text CSS pseudo element is a Scrapy extension to CSS selectors.