Join comma with space in angular js - css

I have a string of sequence say "aby,abraham,issac,rebecca,job,david,daniel" now I need to add space after the comma.
I bind the value using ng-bind and display the result using ng-show. I'm unable to use join as it is received as array from the database.

You can directly bind like this,
<span ng-bind="users.name.split(',').join(', ')" ng-show="users.name"></span>
No need to create filters.
To initialize the value, use ng-init directive to hardcode the value to Username
ng-init="Username='aby,abraham,issac,rebecca,job,david,daniel'"

You can use filter to do this task
.filter('commaSpace', [function () {
return function (str) {
return str.replace(',/g', ', ');
};
}])

Related

How to pass the data to a template using blaze-layout render?

I tried the following code to pass data to a template and receive it in onCreated() but I cannot access the data.
deviceInfo.js:
BlazeLayout.render('layout',{main:'deviceInfo',stats:'paramstats',attr:"SOME_DATA"});
deviceInfo.html:
{{>Template.dynamic template=stats data=attr}}
paramstats.js:
Template.paramstats.onCreated( () => {
console.log("onCreated");
console.log("Data is:",this.data.attr);
});
But I get TypeError: Cannot read property 'attr' of undefined.
where am I going wrong?
You need to use the normal function syntax for onCreated callback. Arrow function will bind the context of your function to the outer scope automatically, it is the cause of your problem. Try this:
Template.paramstats.onCreated(function() {
console.log("onCreated");
console.log("Data is:",this.data.attr);
});
I am using Meteor 1.4.# and I was able to retrieve the parameters like so:
BlazeLayout.render("page", {
params: ['fullscreen', 'route']
});
// page.js
Template.page.onCreated(function() {
let params = this.data.params();
console.log(params);
}
Not quite sure why you're using two levels of indirection. BlazeLayout.render() is giving you one level and then you're using a dynamic template within that? Why not directly render the template you ultimately want using BlazeLayout.render()?
In any case, you're dereferencing your data context indirectly.
In the BlazeLayout.render() call you're setting the attr variable to some value.
Then in your dynamic template you're using data=attr but this means that inside your template helpers that this is going be have the value of attr. There will be no data subkey added automatically.
You don't show the value that you're setting for attr so it's not even clear that you have an attr subkey in your attr variable, that would also be confusing to anyone else who ever tries to debug your code.
#khang is correct about not using the arrow function syntax in onCreated(), try:
Template.paramstats.onCreated(function(){
console.log("onCreated");
console.log("Data is:",this);
});
this should have whatever value you stuffed into attr in your BlazeLayout.render()

Smarty syntax for turning a dictionary into a string and push it into the data layer

I am trying to find a way to pass a string variable (coming from a dictionary) into my website's data layer.
My array is built using the following snippet:
[{foreach from=$orderArticles item="currOrderArticle"}]
[{assign var="currBasePrice2" value=$currOrderArticle-getBasePrice()}]
product_list.push(
{
id: "[{$currOrderArticle-oxorderarticles__oxartnum->value}]",
price: [{$currBasePrice2->getBruttoPrice()}],
quantity: [{$currOrderArticle-oxorderarticles__oxamount->value}]
}
);
products_info.push(
{
transaction_id: '[{$order->oxorder__oxordernr-value}]',
transaction_cid: '[{$order->oxorder__oxuserid-value}]',
item_id: '[{$currOrderArticle-oxorderarticles__oxartnum->value}]',
item_value: '[{$basket-getDiscountedNettoPrice()}]',
item_quantity: '[{$currOrderArticle-oxorderarticles__oxamount->value}]'
}
);
[{/foreach}]
If I want to pass it to the data layer, I do the following:
dataLayer.push({
ProductsInfo: products_info
});
This works fine, the issue is that I actually want to modify this array.
I would like to apply the following to it before passing it into the data layer:
products_info|json_encode|escape:'url'
But when I try to do it during the push, it does not work:
dataLayer.push({
ProductsInfo: products_info|json_encode|escape:'url'
});
As I told you in another post, Smarty expressions must be enclosed in delimiters, in your case [{ and }]
Also, as you're using the string in javascript, it must be enclosed within quotes:
dataLayer.push({
ProductsInfo: '[{products_info|json_encode|escape:'url'}]'
});

How to truncate string using meteor and handlebars?

In jinja2(python) template engine there is a simple thing for truncating strings:
{{ fooText|truncate(200) }}
Does meteor(handlebars) provides something like this?
I am using values as options, starting value as well as ending value passed as arguments form template. Try this:
Handlebars.registerHelper('trimString', function(passedString, startstring, endstring) {
var theString = passedString.substring( startstring, endstring );
return new Handlebars.SafeString(theString)
});
In template:
<p>{{{trimString value 0 300}}}</p>
it'll print first 300 characters of the value. Hope this help you.
I never use | on spacebars (the engine used on meteor template), but you can do a helper to accomplish this(for example a global Template.registerHelperr).
Template.registerHelper('text', function(passedString) {
var fooText = passedString.substring(0,1); //same as truncate.
return new Spacebars.SafeString(fooText)
});
And use it like {{ text myString}}
Here we are using some Blaze and the substring method.

filtering collection from backbone with attributes

I've got a backbone collection and I'm trying to filter by an id within the attributes
basically, a user has classes, and the class has a location_id, and I want to filter by the location id. My collection looks like this to give you an idea.
-user
-models
-0
-attributes
-location_id
-1
-attributes
-location_id
-2
-attributes
-location_id
I thought I could filter this by using
var get_locations = user_class_collection.filter(function(classes){
console.log(classes);
return classes.get(location_id)==location.id;
});
console.log(get_locations);
but that is returning an empty array, when I know the location_id is in the collection.
Any idea why this isn't working? I've also tried to grab classes.attributes.get, but it wasn't any better
In the first few responses, it was properly mentioned that I had to quote the get('location_id'). I've now done that, but unfortunately, I'm still getting an empty array. I thought that the filter would loop through the classes and I would get a console output for each class, but the console.log(classes) is only getting triggered once. Is that a hint? Or a red-herring?
you are trying to get a property from classes that is named as the value of the location_id parameter
you should instead make that a string (in fact you can choose how you make it a string, single or double quotes both work)
user_class_collection.filter(function(classes){
return classes.get('location_id') == location.id;
});
For filtering collection using backbone the best approach is to use a filtered function in your collection
var UserCollection = Backbone.Collection.extend ({
filtered : function ( id ) {
I suggest to use UnderScore filter which will return true for valid and false for invalid where true is what you are looking for. use this.models to get the current collection models use model.get( '' ) to get the element you want to check for
var results = _.filter( this.models, function ( model ) {
if ( model.get('location_id') == id )
return true ;
return false ;
});
Then use underscore map your results and transform it to JSON like
results = _.map( results, function( model ) { return model.toJSON() } );
Finally returning a new backbone collection with only results
return new Backbone.Collection( results ) ;
Optionally if you don't want to keep all the data in the collection but just the filtered one you should reset the collection and skip the above return like
this.reset( results ) ;
View call the filtered collection and the render the result
Try this:
user_class_collection.select(function(classes){
return classes.get("location_id")==location.id;
});

How do I read this JSON string?

I am getting this JSON string from an ASP.Net webservice:
{"d":{"Table":[{"col1":123,"col2":"name","col3":"name","col4":100,"col5":"\/Date(1153033200000)\/"},{"col1":123,"col2":"name","col3":"name","col4":101,"col5":"\/Date(1153033200000)\/"},{"col1":123,"col2":"name","col3":"name","col4":102,"col5":"\/Date(1153033200000)\/"}]}}
In my jQuery how do I reference the Table code so I can loop through the data?
msg.d[i].col1
What am I missing? msg.d.table[i]?
The property d is an object that contains the property Table, which is an array of objects that contain the property col1.
So, you use msg.d.Table to access the array, msg.d.Table[i] to access an item in the array, and msg.d.Table[i].col1 to access the property in the item.
Note that Javascript is case sensetive, so while msg.d.Table works, msg.d.table won't.
This gets the array and loops through it:
var tableArray = msg.d.Table;
$.each(tableArray, function(){
alert(this.col1);
});
msg.d is an object. msg.d.Table will give you what you want.
To iterate:
$.each(msg.d.Table, function(row) {
// Get specific value:
window.alert(row.col1);
// Iterate through all columns:
$.each(row, function(column, value) {
// Do something..
});
});
$.each(msg.d.Table, function(i, val) {
alert(val.col1);
});
I hope this helps!
You can use jQuery's JSON parser:
data = jQuery.parseJSON(JSON_DATA);
And then refer to objects directly via the data variable:
data.my_property

Resources