Binding from Html Dom elements to json objects - javascript

I am working on a search panel, where I want to bind the data entered in these input elements to a search parameter json object. This search parameter will then be used for, you guessed it right, searching.
For example, user when searching for another person and he can specify the name, age or sex of the person on the page. I have json object which has, as its members Name, Age and Sex. I want to bind the inputs entered in the corresponding input elements on the page to this JSON object automatically, so when the user clicks on the Search I will just use whatever the json object has as a search param.
This is primarily to avoid having to - first find the corresponding element and then assign the corresponding member of the JSON object to the input in this field.
I could find jquery plugins (Databind) , which do the other way round i.e. transfer the values of a JSON object to the input elements.
Thanks in advance!!

I think you are confusing your terminology: presumably you mean a Javascript object.
Anyway, your object or json string need to be constructed when the user clicks "Search". It will be difficult/fiddly to assign these as the user enters text into the input fields. You could use the onblur event but you're just making unnecessary work for yourself.
Far easier is just to give each input field an id, and when the user clicks "Search" you build your object, then JSONify it. Here's how you might do it (not tested!):
<input type="text" id="name" />
<input type="text" id="age" />
...
var obj = { };
obj.name = document.getElementById('name').value;
obj.age = document.getElementById('age').value;
...
var json = JSON.stringify(obj);

Related

JSON user search

I have the following gist with a JSON database and an XHR object.
The user parameter from getUsers(user) method is an input value.
I want select an user from the db via input search value. But i don't know how to set the http url or the searching algorithm.
I can select an user via: user.Name1 but how can i modify the entries after the dot .Name1 so it can be selected with the input value.
E.g: user. + "input value". I can't figured out.
I hope I inderstood you right, you want to access it via square brackets:
user[userValue] where userValue is your input variable
You can access on object like this user["Name1"] and as such can do this : user[input_value_variable]

Return object bound to a dynamic element when label for object is also dynamic

I am using CKEditor. Within my page, the user can dynamically add/remove the element containing the WYSIWYG ckeditor text editor.
CKEDITOR.instances returns an object which contains within it all the ck_editor objects on my page.
When the user clicks the add button, then the following code successfully grabs that element:
CKEDITOR.instances[“my_textarea_0_body"]
The issue is when the user clicks delete to remove that element, and then reclicks add. I now want to grab that new ckeditor element on the page. However, now I need to grab it with this:
CKEDITOR.instances[“my_textarea_1_body"]
Notice that the number changed. So, the user is able to toggle the add/remove of this element any number of times. Example: if they did it 100 times I would need to have a way to grab that object like so:
CKEDITOR.instances[“my_textarea_100_body"]
The problem is that I never know what that number will be. That number is vital for me to create the string in order to grab the appropriate object.
Question: How can I grab this dynamically labeled object that is contained within the CKEDITOR.instances object? I know that my desired object will always be the LAST object appended within that CKEDITOR.instances object.
I assume that CKEDITOR.instancess a kind of a map (dictionary), so you can get all key names by Object.keys(). And then select the last/first/ or n-th instance name.
var mapping_length = Object.keys(CKEDITOR.instances).length;
var object_label = Object.keys(CKEDITOR.instances)[mapping_length - 1];
CKEDITOR.instances[object_label];
This will return the desired object from within that dictionary object.
Regex indeed is your friend here. /^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test(str) should get the job done. (if you copy and paste any of your initial examples to test, it will fail however since you've got an angled quote illegal character in there)
console.log(/^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test('CKEDITOR.instances["my_textarea_0_body"]'))
I think I understand what you're getting at though - you know the vague structure of the key, but not exactly what it will be when you're trying to retrieve it. In that case, you'd want to search through the keys of the CKEDITOR.instances object for any that match that pattern. So, let matchingKeys = Object.keys(CKEDITOR.instances).filter(key => /^my_textarea_\d+_body$/.test(key)). That will return a set of all keys that match that pattern.
You can create a helper function which checks for a regex match. The regex for that field should be:
my_textarea_\d+_body
Then you can modify/add the new object key to instances

Javascript - Dynamics CRM Online - Passing a lookup field value to a form through openEntityForm

I am using Xrm.Utility.openEntityForm to clone a record. I have a group of attributes I need to copy over to the new form when I call openEntityForm. You do this by passing in a parameters object that is filled with the values of the attributes on the original form.
My question is: How do I pass the value of a lookup field as a parameter in the parameters object? I have a lookup field named "Department" -- I get the original value like this:
var department = parent.Xrm.Page.getAttribute("new_departmentid").getValue();
To set the value of the field on the cloned record, I initially create a parameter object -- var parameters = {}; -- and I set the value for the lookup field like this --
parameters["new_departmentid"] = department[0].id;
The parameters object gets passed to the openEntityForm method. This works to set the value of the new form's Department field, BUT the field reads "(No Name)".
I tried to do something like this:
parameters["new_departmentid"] = {
id: department[0].id,
name: department[0].name,
entityType: "new_department"
};
But that did not work, and I got errors saying parameter["new_departmentid"] expects a data type of "UniqueId".
How do I pull along the name to correctly populate the lookup field using this method? Thanks for any help.
I have a clone function that doesn't use openEntityForm, it just constructs a URL and then calls window.open. But it should be the same. You can pass lookup values by creating three separate parameters:
one for the id using the field's id
one for the name using the field's id + "name"
one for the type using the field's id + "type".
This should work for you:
parameters["new_departmentid"] = department[0].id;
parameters["new_departmentidname"] = department[0].name;
parameters["new_departmentidtype"] = department[0].entityType;
Bonus: Note that for lookups that can only take one entity type, you can omit the type parameter. It's only needed when passing values to lookups like Owner or Customer which can take multiple types. Omitting the parameter will allow you to pass more valuable information before hitting the URL limit of ~2k characters.

Angular ng-model send data as array to rails-api

When adding the ng-model directive to an HTML element, I usually do so with it attached to an object. However, before sending the HTTP request, a portion of the data should be an array of objects.
In my rails-api I have a User model and an Address model. The user has many addresses and the address belongs to a user.
The goal is to just take in the parameter via strong params and save each of the addresses (received as JSON, array of objs) and have them each be related to the user.
Currently, i'm numbering them and doing some extra manipulation prior to shipping the data off to the API. Ex:
<input type="text" ng-model="form.address1">
And then for the second, ng-model="form.address2".
How can I setup an array of objects using the ng-model attribute and add objects onto the array in my HTML?
You can bind to array too:
<input type="text" ng-model="form.address[0]"> Address 1
<input type="text" ng-model="form.address[1]"> Address 2
Demo: http://plnkr.co/edit/owpAqLLlgOjBKfqHSZ4U?p=preview

change value of input text field

That's the html for the input field:
<input id="sku_input_field" type="text" name="items[0<?php echo $uniqueSuffix; ?>][sku]" class="input-text" />
And the javascript code that I am trying:
$('sku_input_field').value = jsonResponse.sku;
document.getElementById("sku_input_field").value = jsonResponse.sku;
So, you see, I am trying 2 approaches, and it doesn't work. I use FireBug to check and the response is NOT empty. I can see all the values that I am setting into it. The value of the field though still remains the same as the one I am typing.
It is that I type an id, and when the object with that id is found in the database I return a json response with some values (this happens in PHP). And one of these values, in the json response, is the one I want to set as a new value of the input field.
The value of the sku attribute is what I want to set as value of the input field. As you see, the response is not empty.
Should be :
jQuery
$('#sku_input_field').val(jsonResponse.sku);
// Provided jsonResponse.sku is not empty
// Also make sure jquery library is added.
Pure Javascript :
document.getElementById('sku_input_field').value = jsonResponse.sku;
p.s : Please check whether you are using same ID for any other element. ID needs to be unique.

Categories