Using Schema JSON, I have this drop down list that has data populated into it. Each item in the drop down list has a value. How do I get that value and populate data into a different text box?
For example, let's say the drop down looks like:
A
B
C
D
If the user selects "A", how do I find that the user selected "A"? Or even get the selected value 1? And then getting the selected value, a textbox under will say "Correct" or "Incorrect".
Here's what I'm working with:
vm.sf.form = [
{
type: 'fieldset',
title: 'Some Title',
items: [
{ key: "Answers", title: "Choose One", type: 'select', onChange: "itemSelected(form.titleMap)", titleMap: getTitleMap()},
{ key: "isCorrect" title: "Your Answer is: ", type: 'string', readonly: true}
]
}];
The "onChange: "itemSelected(form.titleMap)" calls a function itemSelected, which is where I would like to have the functionality check what is selected.
The form.titleMap returns "A, B, C, D" but not the actual selected value.
The function for itemSelected looks like this:
$scope.itemSelected = function (value) {
var answer = value;
if (answer == 'A'){
//set isCorrect to say "Correct" in the text box...
}
}
The itemSelected function just test code for now..
In this function, "value" returns "A, B, C, D" instead of the actual selected value, since I am passing in the titleMap. How do I pass in the selected value? And then how do I change the textbox text to say "Correct" or "Incorrect"?
I figured it out when I changed the form.titleMap to "this". It helped me map around the form to find the actual value that was selected. When I found the actual selected value, it was easy to do the rest.
I hope this helps others that may have the same issue...
Related
Help with filter function!
I have a table with phone number and name as columns.
The JSON object would look something like this :
Details = [
{PN : '123-456-7890',
NAME : 'PERSON A',
},{
PN: '192-453-7655',
NAME: 'PERSON B',
}
]
I need to search on keyup and filter the data. The user can search in any of these patterns:
xxxxxxxxxx,
xxx-xxx-xxxx,
xxx-xxxxxxx,
xxxxxx-xxxx.
and still needs to get the data having xxx-xxx-xxxx as phone number in the table. Search should start as soon as the keyup triggers.
I tried using match and test methods, but couldn't make connection between search input, regex and the elements from table.
Can anyone suggest how I can tackle this situation?
Please use this regex -
/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/
Angular Code -
matchNumber(){
var str = "12311111455";
var res = str.match(/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/);
if(res.length > 0){
console.log('Matched);
}}
Valid Numbers
1234567890
123-456-7890
123-4567890
123456-7890
Invalid Numbers
123453647564756876
111223-234234
Check DEMO -
Check Valid Numbers
I have the following JSON:
{"contents":
[
{"mossadId":2,"empId":"999666333","id":12},
{"mossadId":4,"empId":"999666333","id":13},
{"mossadId":2,"empId":"301301301","id":14}
]
}
I have verified this by writing this result to the console.
I am then using the following code to try make a table out of it:
var response = (data.contents); // remove containing 'contents' envelope
console.log(response);
var table12 = new Tabulator("#mossadListing", {
layout:"fitColumns",
data: response,
columns:[
{title:"organization", field:"mossaId", sorter:"string", width:100,
]
});
But i land us with a table with one columns, which all fields are empty.
Am I doing something wrong?
If you are going to specify columns then the field name has to match the object key. Your data has:
"mossadId"
and the field is named:
"mossaId"
note the missing 'd'.
You also have only one field/column defined. If you want to see the rest you need to add them to columns.
We are stuck with filling in form from JSON data and need help. The component is about selecting the ward in the district of the given city.
The data structure is a tree of Cities, Districts, and Wards with approximately following structure (everything is wrapped in GeoJSON):
// Cities: '/api/cities/berlin'
{
features: [
{
type: "Feature",
properties: {
slug: "berlin",
name: "Berlin",
districts: [
{name: "Neukölln", slug: "neukolln", ...}
]
},
geometries: {...}
}
]
}
// Districts: '/api/cities/berlin/districts/neukolln'
{
features: [
{
type: "Feature",
properties: {
slug: "neukolln",
name: "Neukölln",
wards: [
{name: "Britz", slug: "britz", ...}
]
},
geometries: {...}
}
]
}
// Wards: '/api/cities/berlin/districts/neukolln/wards'
{
features: [
{
type: "Feature",
properties: {
slug: "britz",
name: "Britz",
},
geometries: {...}
}
]
}
In the view, three are three dropdown boxes for selecting City, District and Ward, thus, when User select City, then District dropdown is filled from the properties.districts field of the JSON response.
Same is applied for the Districts dropdown: wards are filled in from the properties.wards
When the page is loaded it already has an injected JSON of all available Cities (and, accordingly their districts)
What strategy would you advise on:
1) how to get currently selected city and hit server for next administrative divisions? I.e. when a user selects District, get its slug and query server for the wards?
2) how to fill subsequent select from the response or injected JSON on the page? I.e. when user select another City, fill District select box with respective Districts?
Here's how I have done something similar in the past (in elm v0.17.0):
dropdown : List City -> Html Msg
dropdown cities =
div []
[ div []
[ span [] [ text "dropdown label name" ]
, selectOptions cities
]
]
selectOptions : List City -> Html Msg
selectOptions cities =
select [ on "change" ( Json.map (\city -> GetDistrictsMsg city) targetValue ) ]
(List.map setOption cities)
setOption : City -> Html Msg
setOption city =
option [ value city.name ]
[ text city.name ]
And you will repeat the same for districts to get wards.
Start-up
If selected city is known, before the start-up, you can pass in as a flag to Html.App.programWithFlags
The same thing you can do to the list of cities.
Please see the http example, it covers most of the stuff.
If you want to send xhr request on start-up, you might use a little neat trick for that:
init : String -> (Model, Cmd Msg)
init topic =
( Model topic "waiting.gif"
, getRandomGif topic
)
Where getRandomGif will execute the xhr request on start-up, assuming that you have gotten some data for that from passing them as flags or from user input.
On every FetchSucceed, you should send the next xhr to grab the data for the next step.
The flow
Please consider this flow chart, illustrating the flow of your multi step form. Dashed arrows point to steps, where you can restart the cycle, if you want to change the city/district at some point.
Caching layer is optional, Elm offers a variety of data structures for that.
I am converting a shopping basket to an immutable structure.
Is there an easy way with immutablejs to see if an immutable object already exists within an immutable list EXCEPT for one object property 'quantity' which could be different? List example:
[{
id: 1,
name: 'fish and chips',
modifiers: [
{
id: 'mod1',
name: 'Extra chips'
}
],
quantity: 2
},{
id: 2,
name: 'burger and chips',
modifiers: [
{
id: 'mod1',
name: 'No salad'
}
],
quantity: 1
}]
Now, say I had another object to put in the list. But I want to check if this exact item with modifiers exists in the list already? I could just do list.findIndex(item => item === newItem) but because of the possible different quantity property then it wont work. Is there a way to === check apart from one property? Or any way to do this without having to loop through every property (aside from quantity) to see if they are the same?
Currently, I have an awful nested loop to go through every item and check every property to see if it is the same.
Well this should work-
list.findIndex(item => item.delete("quantity").equals(newItem.delete("quantity"))
The equals method does deep value comparison. So once you delete the quantity, you are comparing all values that matter.
PS: please ignore code formatting, I am on SO app.
PPS: the above code is not optimal, you should compare a pre-trimmed newItem inside the arrow function instead of trimming it there.
I would like to create a Form in ExtJS 5.0 completely based on a Store. Every store item represents a "line in the form". A "line" consists three or more form widgets.
Basically this is a search panel, where you define search conditions. Every condition consits of: FieldName selector, an operator selector, and a widget to write/select a condition operand. For example search for people with:
name starting with Joe (FieldName:name, operator:starting with, widget:textfield)
birtday before 1980.01.01. (FieldName:birthday, operator:before, widget:datepicker)
I get the conditions in JSON, and load them in a Store. I would like to dynamically generate the form based on this store, make modifications in the form, and ask the Store for a new JSON with the modifications (new conditions, etc).
I have problems with the first step: simply generate form widgets based on store content.
How can this be done?
I'm going to assume here that the JSON data represents a variety of dynamic data, and you can't simply use a pre-canned control like a grid, or a fixed form.
What you need to do is to make your own container class, which dynamically creates widgets based on the JSON content. You'll have to write this yourself, of course.
One extreme is to make your JSON content in the store be valid arguments to, say, Ext.widget - but that's probably not feasible, or even desirable.
For a more middling position, use the JSON data to determine, based on conditions, what widgets to add.
As a rough outline, you want something like this:
Ext.define('MyFormContainer', {
extend: 'Ext.form.FormPanel',
config: {
// A store or MixedCollection of JSON data objects, keyable by id.
formData: null
},
layout: 'vbox',
initComponent: function() {
this.callParent(arguments);
this.getFormData().each(this.addField, this)
},
addField: function(fieldData) {
var widgetConfig = this.buildWidgetConfig(fieldData);
this.add(widgetConfig);
},
buildWidgetConfig: function(fieldData) {
// The heart of the factory. You need a way to determine what sort of widget to make for
// the field. For the example config, a fieldset with three fields would probably be
// appropriate:
var fieldSet = { xtype: 'fieldset', layout: 'hbox' };
var items = [];
items[0] = { xtype: 'textfield', name: fieldData['FieldName'] };
// this would be a link to a custom widget to handle the operator. Or maybe you could
// just spit out text, if it's not meant to be alterable.
items[1] = { xtype: 'myoperator_' + fieldData['operator'], name: 'operator' };
items[2] = { xtype: fieldData['widget'], name: 'value' }
fieldSet.items = items;
return fieldSet;
}
})
This is a simple and contrived example, but it should (after you fill in the blanks, such as missing requires and the custom operator widgets) render a form based on the JSON data.
(I personally use this approach - with a great deal more sophistication that I can show in a simple example - to generate dynamic forms based on server-supplied form descriptions)