How to create the tree view using angularjs and json? - javascript

How to add the child value when we checked the parent element? How to passing Checkbox value to javascript?

I don't know the code which you have been written let me know code.
Most probably you required to create one action and call it when you checked checkbox and this action push objects into $scope.items or you can use map in javascript for faster operation while fetching.

Related

Svelte: Trigger update of {#each} in child component [duplicate]

This question already has answers here:
Svelte's reactivity with array operation
(2 answers)
Closed 6 months ago.
I am trying to update a child component with an {#each} loop inside it to add additional items by push()ing them to the array that is iterated by the child component. While an individual variable (say a string or number) works fine and array that feeds a {#each} loop doesn't seem to.
I am using a bind: to pass live data to the child component and have also tried to use a $: array statement in the child. Whatever I do, pushing new data to the array in the parent has no effect on the child, is there a way to do this or do I have to split off and re-render the whole child component {#each} loop every time?
I have posted my test script in a REPL: https://svelte.dev/repl/e1f24f8fccfa4533a1d682d163af9a66?version=3.49.0
Type text in to the input box and hit the 'Note This' button.
If you watch the JS Console you can see the array expanding, but the {#each} loop is not rendering the extra items to the child component.
Svelte works in a way where it only detects updates from assignment. You can read more about it here:
https://svelte.dev/docs#component-format-script-2-assignments-are-reactive.
Using methods such as push won't automatically trigger updates.
In your case you can just add testData = testData after pushing the new object and it works fine.

How to check if any value was changed in an editable Object without using FormGroup?

I am having nested objects with multiple properties. I have created an input field on the UI for every property and value is changed by using [(ngModel)]. I want to implement a functionality where if any value in the object is changed I should be able to detect it and enable the reset option to show initial values again.
I have tried exploring this and the majority of answers were related to form controls only.
if you bind with two-way binding to data you will not be able to hold old record. You can write a fn to compare to objects if you bind with [ngModel].Here is pseudo.
in .ts
value = {}
onValueChange(data:any){
const changedData = getChangedData(this.value, data);
}
in .html
<input [ngModel]="value" (ngModelChange)="onValueChange($event)">
}

Knockout - How to recreate a JSON object from modified form [duplicate]

I have a JSON object that I used to create a form. This JSON object is parsed by KnockoutJS.
Now, when I modify the form, I want the JSON object to be updated according to the modifications made in the form. The thing is that I don't know in advance how the form will be like but I know in the JSON Object which fields need to be updated.
I really don't know what is the best way to procede. I know that I could reconstruct the JSON Object each time something has changed but this seems like a bad idea and a tedious process.
Is there a simple way to map each JSON Object field to form items in KnockoutJS ?
Here's a JSFiddle of what I'm currently doing:http://goo.gl/ZBaV7
Update :
I realized something interesting with this line:
<input type="text" data-bind="value: $data.value, attr : { disabled: $data.disabled }" />
I'm accessing the value directly from the array via ($data.value). Is there a way in the html to say to knockout to bind to this particular attribute in the array. I know that if the array would get reordered everything would get messed up but since I know that the only thing that can changed is this property I'm ready to take this risk ?
In other words, is there a way to manually say that when this value changes to change it in the array such as
data-bind="onChange: $data.value = this.value"
Is there a simple way to map each JSON Object field to form items in
KnockoutJS ?
Yes, If I understand what you want to do correctly. As of now, the values in your view model are not observables and won't be updated automatically as the form values change. There is a plugin to handle this mapping.
http://knockoutjs.com/documentation/plugins-mapping.html
Example: Using ko.mapping
To create a view model via the mapping plugin, replace the creation of
viewModel in the code above with the ko.mapping.fromJS function:
var viewModel = ko.mapping.fromJS(data);
This automatically creates observable properties for each of the
properties on data. Then, every time you receive new data from the
server, you can update all the properties on viewModel in one step by
calling the ko.mapping.fromJS function again:
ko.mapping.fromJS(data, viewModel);
Hopefully this helps.
If your Knockout ViewModel matches your form, you could just use the built in ks.toJSON()
http://knockoutjs.com/documentation/json-data.html
A better option, especially if your form is large or complex, is to use either the mapping or viewmodel plug-ins
http://knockoutjs.com/documentation/plugins-mapping.html
http://coderenaissance.github.io/knockout.viewmodel/
The simplest way to turn your json model into a usable knockout model is with the mapping plugin.
Alternatively, you can manually copy fields from your json model into ko.observable members of your view model, which give you more control and lets you choose to skip read-only properties.

Knockout Options Object Binding

I'm struggling with Knockout.js Options binding, to an Object.
I'm attempting to create a workflow for the user that allows them to add an Item, edit its properties and then save/cancel to propagate those changes.
I've accomplished this type of task before with jquery. However I'd like to avoid the complicated stack calls that jquery would require. (if possible).
I've created an example:
http://jsfiddle.net/nAE2f/
Whats working in the example:
The Add button, creates a new object.
The Save Button will save it to the array.
The Select Dialog will update with a new Option.
Unfortunately, this is where my progress has halted. While the Select Option is created, it doesn't reflect the underlying objects Name. Also Switching between objects doesn't change the forms properties as I would expect.
I've tried assigning the optionValue to the id, but in that case the Select Options isn't created on save.
The problem with the way you binding member name to item. In your case saved item always has empty name that's why select also display empty text. I fixed this by creating selectedMember property within ViewModel to handle selected member and assigning member name to item on Save.
Check fiddle for example

KnockoutJS observableArray to update when inner observable is changed

I need to know how to trigger the update for an observableArray when an observable is changed inside the observableArray.
I have an observableArray that represents a binary tree. I'm using a storage mapping function to get and set the values in the array so it has to be balance even thought it might only contain an empty observable. E.g. nodes()[9] maybe null but when that node is updated I would call nodes()[9](set new value) and need to trigger the observableArray to update
Ended up using .replace() on the observableArray
Managed to look through the code and find observableArray.replace ()
RELATED: How to replace a given index element in knockoutjs

Categories