I am creating a weather web app based on API from openweather.com using Spring-Boot and Angular.
I am also using this weather-icons package.
In my HTML file weather icons are displayed like this:
<div class="jumbotron">
<i class="wi wi-snow" style="font-size: 8em;"></i>
<i id="description">{{weather.weatherID}}</i>
</div>
With the help of API I have also weather code value available in html.
Let's say I have a file weather.data with weather codes mapped to icon description like this:
601: snow
602: sleet
611: rain-mix
Is it possible to display certain icon in HTML based on value in data file?
What I want to do is something like:
<div class="jumbotron">
<i class="wi wi-{{weatherDescription}}" style="font-size: 8em;"></i>
</div>
You can get your data from weather.data in a scope variable.
It would be like:
In Controller:
$http.get(path of weather.data file, null, function(response){
$scope.weatherList = response; //do angular.fromJson if required
});
I hope you are getting a JSON object as :
$scope.weatherList = {
601: "snow",
602: "sleet",
611: "rain - mix"
}
If you are getting weather code from server side in weatherDescription, then you can use it like this on html :
In Html:
<div class="jumbotron">
<i class="wi wi-{{weatherList[weatherDescription]}}" style="font-size: 8em;"></i>
</div>
I hope this works for you.
Related
I am working on my first dynamic website using HTML, Express & node.js. Reading through the Stripe documentation and other sources I've come across various examples but my main goal is to use my Stripe API key and each item price ID's in my server and not in my front end code so no one can temper with them. I've successfully use my Stripe API key on my backend and used the .post method to redirect the user after pressing the Buy Now button to the checkout page as shown below:
Node.js
const stripe = require('stripe')('sk_test_key');
const express = require('express');
const app = express();
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:4242';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: 'price_priceKey',
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,
});
res.redirect(303, session.url);
});
app.listen(4242, () => console.log('Running on port 4242'));
HTML
<!DOCTYPE html>
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<title>Product Page</title>
<link rel="stylesheet" href="style.css" />
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<div class="row">
<div class="col-lg-6">
<section>
<div class="product">
<img
class="collar-img"
src="image"
alt="product-image"
/>
<div class="description">
<h3>Leather Collar</h3>
<h5>$9.99</h5>
</div>
</div>
<form action="/create-checkout-session" method="POST">
<button type="submit" id="checkout-button">Checkout</button>
</form>
</section>
</div>
<div class="col-lg-6">
<section>
<div class="product">
<img
class="collar-img"
src="image2"
alt="product-image2"
/>
<div class="description">
<h3>Comsos Collar</h3>
<h5>$19.99</h5>
</div>
</div>
<form action="/create-checkout-session" method="POST">
<button type="submit" id="checkout-button">Buy Now</button>
</form>
</section>
</div>
</div>
</body>
</html>
My problem is I've only figure how to hardcode the price ID for a product inside my line_items object in node.js so when the user clicks the Buy Now button it will only add to the checkout page the items that I added. I've come across examples of adding the price ID to the attribute "data-price-id" inside each button element so that each item has a button that contains its correct price but that exposes all my price ID's to my frontend code. I already tried hiding the ID in my frontend using EJS and the dotenv module in node.js but this was futile. I would really appreciate if someone could point me the right direction or sample code on how to pass these different price ID's after user clicks on each button of each item back to my server.
It's okay to expose the Price IDs to the front-end code. Nobody can do anything with those Prices without access to your API keys, so it's okay if they show up on the front-end.
That being said, you can dynamically pass an ID from back-end to front-end via a number of different methods. The one I would recommend would be document.querySelector()[0]. This allows you to dynamically set an HTML element's value using Javascript.
An example might look like this: document.querySelector("#price-id").value = somePriceID;
The above snippet looks for an HTML element called price-id and assigns the value from the somePriceID variable to it.
[0] https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I see you're not using a DB.
One approach you could make is just create an object on the server such as:
const PRODUCT_IDS = {
toaster-x1000: {
price_id: 'toaster-price-id'
}
};
That way, you can just use your own codes on the HTML sites and find the Stripe code on the backend when you need it.
For example, if they want the toaster, you would send "toaster-x1000" and just grab that ID from the list:
const ID_RECEIVED = "toaster-x1000";
const CORRECT_STRIPE_ID = PRODUCT_IDS[ID_RECEIVED].price_id;
That would give you the price id you need for the API call.
I get string data from my database to my variable, I want to display them as HTML tags by [innerHTML], but it doesn't work.
The variable is displayed on string instead HTML Tags.
I tried to use with DomSanitizer but it don't work:
article:Article[];
(article.articlesTitleHtml:SafeHtml;)
in the function:
this.article.forEach(elementArticle => {
elementArticle.articlesTitleHtml = this.sanitizer.bypassSecurityTrustHtml(elementArticle.articleTitle)
});
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articlesTitleHtml"></h2>
</div>
my code:
in Type Script:
articles:Article[];
ngOnInit() {
this.apiArticle.getArticleList().subscribe(data=>{
this.articles=data
})
in HTML page:
<div *ngFor="let item of articles">
<div id="{{item.articleId}}">
<h2 class="chart" [innerHTML]="item.articleTitle"></h2>
</div>
</div>
It should work, you can check here...
if you can share the type of data that you're dealing with, it will give more insight into the appropriate DomSanitizer method which should be called
in my example above, i used both bypassSecurityTrustHtml & bypassSecurityTrustUrl for the 2 different types of strings which needed sanitization
How to display all the images in the form of grid, which all will come from back end, so the images are in the dynamic form. and I have to put Description as well on those images, and those Description are also coming from Back End in AngularJS?
If image data is coming in array then you can show image using ng-repeat directive.
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageList = allImage;
});
HTML
<div class="col-md-3" ng-repeat="image in imageList track by $index">
<img src="{{image.imageUrl}}" />
<label> {{image.description}} </label>
</div>
You can use ng-repeat for showing you image with description like:
<li class="col-sm-3" ng-repeat="product in productList">
<img src={{product.imageUrl}} />
<label>{{product.description}}</label>
</li>
Here is the documentation
I'm creating a ticket with Cucumber and Capybara, but when it's created I receive an alert with a confirmation message on the HTML page:
Ticket 6168218 created
How could I store just the number of this text on a variable?
This is the HTML code:
`<div id="messages" class="clearfix">
<div class="success global alert-default form-section">
<ul>
<li><i class="fa fa-check"></i>Ticket 6168218 created.</li>
</ul>
<strong>x</strong>
</div>
</div>`
You can get the text of the element with
find('.success li').text #change the .success selector if you need more specificity
then you can extract the number using a regex. All together that would be
ticket_no = /Ticket (\d+) created/.match(find('.success li').text)[1]
I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>