I need to assemble a form dynamically using Alpaca Forms. I have the code below:
$("#form").alpaca({
"schema": {
"type":"object",
"properties": {
"email": {
"type":"string",
"title":"E-mail",
"required":true
},
"mensagem": {
"type":"string",
"title":"Mensagem",
"required":true
}
}
}
});
And it needs to be filled in using variables for it to be generic, because the amount of fields that the form will have will always vary. Ex: sometimes in addition to the "email", "mensagem" properties, I will have the "assunto", "remetente", "destinatario" properties
it would need to look something like this:
$("#form").alpaca({
"schema" : { schemaVariable }
});
What you want to achieve is possible, you just need to remove the braces from your variable and use proper JSON object declaration.
"schema" : schemaVariable
here's a working fiddle for this.
Tell me if you need something else.
Related
I have a nav menu that is rendered using a navigation.ts json file for the menu items. When it gets to the navitem component it uses a ngIf to check if the item from the navigation file has a "function" key and if it does, the desired behavior is for it to use the string value from item.function in the object to fill the value for the (click) event.
In reality, the console throws an error saying "_co.item.function is not a function"
HTML
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>
Navigation.ts
[{
"id": "accounting",
"title": "Accounting",
"type": "collapse",
"children": [
{
"id" : "salesmenSalesLocation",
"title": "Salesmen Sales Location",
"type": "item",
"function": "handleSelect(ReportTypes.SalesmenSalesLocations)"
},
{
"id": "laggingLedgerEntries",
"title": "Lagging Ledger Entries",
"type": "item",
"function": "handleSelect(ReportTypes.LaggingLedgerEntries)"
}
]}]
I have also tried it as (click)="item.function" with no success.
I'm assuming you can change the data source here, because otherwise I don't see any good solution.
A string is not a function, and while you can turn it into one with eval that is a bad idea. What you should really do instead is just pass in a value that tells the function what to use.
Change your data to something like this:
{
"id" : "salesmenSalesLocation",
"title": "Salesmen Sales Location",
"type": "item",
"reportTypeSource": "SalesmenSalesLocations"
},
{
"id": "laggingLedgerEntries",
"title": "Lagging Ledger Entries",
"type": "item",
"reportTypeSource": "LaggingLedgerEntries"
}
Then pass that value to your function and use that to tell it where to look:
handleSelect (reportTypeSource: string) {
const reportType = ReportTypes[reportTypeSource]
// continue as before
}
And call it in your HTML like this:
(click)="handleSelect(item.reportTypeSource)"
Problem lies here:
"function": "handleSelect(ReportTypes.LaggingLedgerEntries)"
And here:
(click)="item.function()"
You cannot simply pass a string and expect the component to execute a function and also know exactly what to do. Here you need to pass the actual function.
Your setup looks over-config'd. I would tear the config down and put the logic into the component itself. Don't be afraid to have more template as well, if anything it makes things more legible (as opposed to the config)
Does that function exist in the component or just the model? If it is just on the model it won't work. (click) is looking for a method on the component. It is, ostensibly just a string in this instance.
I've got a rather specific case: Using mongoose/mongo and user objects
I want to find and update user in one call.
DB.collection('users').findOneAndUpdate({localId: id} ,{ "$set": { "name": "lla", "usnme": "As"} } ,callback);
Note that 'username' is spelled wrong. Yet mongo updated the first field(name) and does not give any error about the second.
How can I validate the keys I pass in $set without making more than one query?
What MongoDB suggests here is called schema validation:
In your specific case you could run the following command to make sure that no additional ("incorrect") fields can be added by anyone:
db.runCommand({ "collMod": "users", "validator": {
$jsonSchema: {
additionalProperties: false,
properties: {
"_id": {
bsonType: "objectId"
},
"name": {
bsonType: "string"
},
"username": {
bsonType: "string"
}
}
}
}})
Beyond that I cannot really think of any solution since MongoDB is a document database which by default is schemaless and hence won't stop you from creating the fields you tell it to create...
I am working with the Affirm javascript API and I need to be able to update the values inside the checkout object but am having trouble doing so. I have tried what is mentioned here but it isnt working.
Basically the object looks something like this:
affirm.checkout({
"merchant":{
"user_confirmation_url":"https://example.com/checkout/",
"user_cancel_url":"https://example.com/exit"
},
"config":{
"financial_product_key":"XXXXXXXXX"
},
"shipping":{
"name":{
"full":"Blah Person"
},
"address":{
"line1":"123 example street",
"city":"Blah",
"state":"IL",
"zipcode":"12345",
"country":"US"
}
},
"billing":{
"name":{
"full":"Dirty Larry"
},
"address":{
"line1":"123 blah street",
"city":"foo",
"state":"IL",
"zipcode":"12345",
"country":"US"
}
},
"items":[
{
"display_name":"Example Product",
"sku":"123",
"unit_price":"1222",
"qty":"1",
"item_image_url":"https://example.com/kitty.jpg",
"item_url":"https://example.com/product/123"
}
],
"discounts":{
"discount_name":{
"discount_amount":0
}
},
"metadata":{
"shipping_type":"Ground"
},
"order_id":"XXXXXXXXXXXXXXXXXX",
"shipping_amount":0,
"tax_amount":0,
"total":67599
});
The above is all set on the first page load but the customer can still update items in their cart so I need to add these changes to the above object if they occur.
I have tried affirm_checkout["shipping_amount"] = 123 that doesn't update the shipping total. Neither does affirm_checkout.shipping_amount = 123 can someone tell me what I am doing wrong?
You should define the checkout object as a variable outside the context of the affirm.checkout function. This way, you can directly access the contents of the object and pass it to affirm.checkout(yourCheckoutObject);
var yourCheckoutObject = {}; //define default or placeholder values
yourCheckoutObject.shipping_amount = 2000; //amounts are expressed in integer USD cents
affirm.checkout(yourCheckoutObject); //pass the object to the checkout function
You can try this:
{
merchant: "foo bar",
config: "baz"
}
Then you can access that by
checkout.merchant = 123
here I have a declaration:
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
debug: true,
rows: 2,
source: 'Timeline/example_json.json'
}
</script>
<script type="text/javascript" src="Timeline/compiled/js/storyjs-embed.js"></script>
so now I want to instead source: 'Timeline/example_json.json' to use
something like:
source: '{
"timeline":
{
"headline":"Sh*t People Say",
"type":"default",
"text":"People say stuff",
"startDate":"10/4/2011 15:02:00",
"date": [
{
"startDate":"10/4/2011 15:10:00",
"endDate":"10/4/2011 15:55:00",
"headline":"prvo",
"text":"<p>dddddddddddddddd dd</p>",
"asset":
{
"caption":"yessss"
}
},
{
"startDate":"10/4/2011 17:02:00",
"endDate":"10/4/2011 18:02:00",
"headline":"drugo da da",
"text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
"asset":
{
"media":"http://youtu.be/u4XpeU9erbg",
"credit":"",
"caption":""
}
}
]
}
}'
but doesn work. I really dont know what is probem exactly... Please help.
So this is verite Timeline plugin and this plugin need JSON as source, but is there any way to change source with Javascript variable?
The way you have this written, the value of "timeline_config.source" is a String, not a "usable" Javascript object.
You may need to convert the string to an object using JSON.parse(). So add this line of code as the last line of your first < script > block.
timeline_config.source = JSON.parse(timeline_config.source)
Alternatively, as pointed out in the comments, you can simply remove the single quotes around the string, and it will natively by a JS Object.
Try removing the ' string delimiter, so it says
source: {
"timeline": { ... }
},
This way it is a JS object and not a string.
I'm using backbone and handlebars for templating and i'm new to this.
My current json is in the below format and the code works fine.
[
{
"id": "10",
"info": {
"name": "data10"
}
},
{
"id": "11",
"info": {
"name": "data11"
}
}
]
But when i change my json structure to something like shown below i'm having difficulty in getting things to be populated.
{
"total_count": "10",
"dataElements": [
{
"id": "10",
"info": {
"name": "data10"
}
},
{
"id": "11",
"info": {
"name": "data11"
}
}
]
}
How can i populate name, info and total_count keeping the current code structure ?
JSFiddle : http://jsfiddle.net/KTj2K/1/
Any help really appriciated.
A few things that you need to do in order for this to work.
Replace Backbone's core 'reset' on your collection with a custom one that understands the data you are passing to it. For example:
reset: function (data) {
this.totalCount = data.total_count;
Backbone.Collection.prototype.reset.call(this, data.dataElements);
}
Now when you reset your collection, it will pull the total_count out of the object you are resetting it with, and use Backbone's core reset with the dataElement array. Keep in mind you may have to do a similar thing with 'parse' if you're intending on pulling this from the server.
I'd recommend that (if your example looks anything like the real code you're working with) you reset your collection before getting to rendering.
var dataCollectionList = new dataCollection();
dataCollectionList.reset(jsonData);
var App = new AppView({model : dataCollectionList});
Now in your view's "render" method you can grab the 'totalCount' property off the collection -
render : function() {
//Should spit the total count into the element, just as an example
this.$el.append(this.model.totalCount);
//or console.log it
console.log(this.model.totalCount);
return this;
}
Voila. Side note - as someone who works with Backbone a lot, it drives me nuts when people set an attribute of something like "model" (i.e. peopleModel, itemModel, etc) and it ends up being a backbone collection. It's much clearer to name it after what it is - though some MVC purists may disagree a bit.
Also, in this code block:
_.each(this.model.models, function (myData) {
$(this.el).append(new ItemView({model:myData}).render().el);
}, this);
You don't need to do _.each(this.model.models.......). Since you're working with a collection, the collection has a built in 'each' method.
this.model.each(function (myData) { ..... } , this);
Quite a bit cleaner.