I'm trying to add a new Observable to an ObservableArray which has been mapped initially with KO's mapping plugin. But I don't get that working. Firebug is telling me "TypeError: totalChf is not a function". Looking at the added Observable, I notice that the Computed functions were not created. I've tried several methods, still without success... What am I missing?
Thanks in advance
Here the code:
var vm;
var ClientsMapping = {
create: function (options) {
var client = ko.mapping.fromJS(options.data, ContainersMapping)
//Some computed observables for level one here...
return client;
}
}
var ContainersMapping = {
'Containers': {
create: function (options) {
var container = ko.mapping.fromJS(options.data, MoneyAccountsMapping)
container.totalChf = ko.computed(function () {
var total = 0;
$.each(container.MoneyAccounts(), function () {
if (this.Currency() == "CHF") {
total += this.Amount();
}
})
return total;
})
//Some computed observables for level two here...
return container;
}
}
}
var MoneyAccountsMapping = {
'MoneyAccounts': {
create: function (options) {
var macc = new MoneyAccountModel(options.data)
//Some computed observables for level three here...
return macc;
}
}
}
var ClientModel = function (data) {
ko.mapping.fromJS(data, {}, this);
}
var ContainerModel = function (data) {
ko.mapping.fromJS(data, {}, this);
}
var MoneyAccountModel = function (data) {
ko.mapping.fromJS(data, {}, this);
}
var data = [
{
'Clients': 'Thomas',
'Containers': [
{
'ContName': 'Cont01',
'MoneyAccounts': [
{ Currency: "CHF", Amount: 1000 },
]
}
]
},
{
'Clients': 'Ann',
'Containers': [
{
'ContName': 'Cont01',
'MoneyAccounts': [
{ Currency: 'CHF', Amount: 1000 },
{ Currency: 'EUR', Amount: 500 }
]
}
]
}
]
function viewModel() {
var self = this;
self.clients = ko.observableArray()
self.clientsCount = ko.computed(function () {
return self.clients().length
})
}
$(function () {
vm = new viewModel();
vm.clients(ko.mapping.fromJS(data, ClientsMapping)());
var cont1 = {
'ContName': 'ContXX',
'MoneyAccounts': [
{ Currency: "XXX", Amount: 1000 },
]
};
var cont2 = {
'ContName': 'ContYY',
'MoneyAccounts': [
{ Currency: "YYY", Amount: 1000 },
]
};
var cont3 = {
'ContName': 'ContZZ',
'MoneyAccounts': [
{ Currency: "ZZZ", Amount: 1000 },
]
};
var cont4 = {
'ContName': 'ContWW',
'MoneyAccounts': [
{ Currency: "WWW", Amount: 1000 },
]
};
vm.clients()[0].Containers.push(ko.mapping.fromJS(cont1, ContainersMapping));//Attempt1
vm.clients()[0].Containers.push(ko.mapping.fromJS(cont2));//Attempt2
vm.clients()[0].Containers.push(new ContainerModel(cont3));//Attempt3
vm.clients()[0].Containers.push(ko.mapping.fromJS([cont4], ContainersMapping)()[0]);//Attempt4
//...still no success.
})
You will generally want to keep your mappings independent of one another. A good way to do that is to define and perform the mappings within each class:
var ClientModel = function(data) {
var mapping = {
'Containers': {
create: function(options) {
var container = new ContainerModel(options.data)
//Some computed observables for level two here...
return container;
}
}
}
ko.mapping.fromJS(data, mapping, this);
}
Once this is organized, you have a couple options for adding a new item to the observableArray:
Create the new item and push it to the array:
vm.clients()[0].Containers.push(new ContainerModel(cont1))
Specify a key option in your mapping:
var mapping = {
'Containers': {
key: function(item) {
return ko.unwrap(item.ContName);
},
create: function(options) {
var container = new ContainerModel(options.data)
//Some computed observables for level two here...
return container;
}
}
}
Then use mappedCreate to add the item:
vm.clients()[0].Containers.mappedCreate(cont1);
JSFiddle
Related
I need to call transformResponse many times based persons array. But the following code call only the last index
function fill() {
var persons = [
{ id: 34, text: $translate.instant("enter") },
{ id: 36, text: $translate.instant("high") },
{ id: 53, text: $translate.instant("graduates") },
{ id: 35, text: $translate.instant("persons") },
]
var personSubCategoriesList = [];
for (var i = 0; i < persons.length; i++) {
$scope.remote = {
url: window.config.apiHostUrl + `lookup/Get?id=${persons[i].id}`,
transformResponse: function (data) {
var personSubCategories = angular.fromJson(data);
angular.forEach(personSubCategories, function (personSubCategoriesObjet) {
var categories = { name: personSubCategoriesObjet.localizedName, code: personSubCategoriesObjet.id };
personSubCategoriesList.push(categories);
});
return personSubCategoriesList.map(function (adminCategories) {
return {
name: adminCategories.name,
code: adminCategories.code
};
});
}
};
}
}
I found the solution by using observable $q
Do I need to execute a bind(this) somewhere and the console log placement seems to be off?
var company = {
employees: [{
name: "doug"
},
{
name: "AJ"
}
],
getName: function(employee) {
return employee.name
},
getNames: function() {
return this.employees.map(this.getName)
},
delayedGetNames: function() {
setTimeout(this.getNames, 500)
}
}
console.log(company.delayedGetNames());
setTimeout(this.getNames.bind(this), 500)
^
|
+----< HERE
var company = {
employees: [{
name: "doug"
},
{
name: "AJ"
}
],
getName: function(employee) {
return employee.name
},
getNames: function() {
return this.employees.map(this.getName)
},
delayedGetNames: function() {
var fn = function() {
var names = this.getNames();
console.log(names);
};
setTimeout(fn.bind(this), 500);
}
}
company.delayedGetNames();
I have a service that i am using to apply a unique number to a model name. the result i am getting is this
"sectionInputs": [
{
"model": "price_min1"
},
{
"model": "price_max2"
},
{
"model": "units_occ3"
},
{
"model": "inv_mod4"
},
{
"model": "inv_fin5"
},
{
"model": "inv_vdl6"
},
{
"model": "inv_uc7"
},
{
"model": "inv_fut8"
},
{
"model": "inv_con9"
},
{
"model": "units_total10"
}
]
i need this to each have '1'. and then in the next object array i need them to have '2', etc... as of now every object array looks like this. i have a plunker with everything setup.
plunker
function sectionInputSvc(sectionInputs) {
var vm = this;
vm.sectionInputsArry = sectionInputs;
vm.sectionInputs = function () {
var arry = [];
var counter = 0;
for (var i = 0; i < vm.sectionInputsArry.length; i++) {
counter++
var obj = {
model: vm.sectionInputsArry[i].model + counter
};
arry.push(obj);
};
return arry;
};
};
[EDIT 2]
in app.js...
sections[i].sectionInputs = sectionInputSvc.sectionInputs(sections[i],i);
and in section.service.js...
function sectionInputSvc(sectionInputs) {
var vm = this;
vm.sectionInputsArry = sectionInputs;
var obj2={};
vm.sectionInputs = function (obj2,num) {
var arry = [];
var counter = 0;
for (var i = 0; i < vm.sectionInputsArry.length; i++) {
counter++
var obj = {
model: vm.sectionInputsArry[i].model + num
};
arry.push(obj);
};
return arry;
};
};
Using linq.js, and assuming the suffixes do not already exist on the names:
vm.sectionInputs = function () {
return Enumerable.From(vm.sectionInputsArry).Zip(Enumerable.ToInfinity(1),
"{ model: $.model+$$ }"
).ToArray();
};
Below is the JSON data.
JSON :
[{
"Code":"US-AL",
"Name":"Alabama",
"Population":4833722
},
{
"Code":"US-AK",
"Name":"Alaska",
"Population":735132
},
{
"Code":"US-AZ",
"Name":"Arizona",
"Population":6626624
},
{
"Code":"US-AR",
"Name":"Arkansas",
"Population":2959373
},
{
"Code":"US-CA",
"Name":"California",
"Population":38332521
},
{
"Code":"US-CO",
"Name":"Colorado",
"Population":5268367
},
{
"Code":"US-CT",
"Name":"Connecticut",
"Population":3596080
}]
I wanted to convert that data to this format.
[{
"US-AL": {
"name" : "Alabama",
"population" : 4833772
},
"US-AK": {
"name" : "Alaska",
"population" : 735132
}
}]
I tried with this function and separated the name and population from it.
var ParentData = [];
var ChildData = {"name": [], "population": []};
data.forEach(function(val, i) {
ParentData.push(val.Code);
ChildData.name.push(val.Name);
ChildData.population.push(val.Population);
})
But I'm not that expert in this. Just a learner and I don't know how to push to the parent data which gets aligned to it respectively.
Any help will be very much helpful for me to achieve this.
Thanks in advance.
Try this:
var newData = {};
data.forEach(function(val) {
newData[val.Code] = {name: val.Name, population: val.Population};
});
Keep in mind that forEach isn't natively supported by IE8-, although it can be polyfilled. This works in every browser:
for (var i = 0; i < data.length; i++)
newData[data[i].Code] = {name: data[i].Name, population: data[i].Population};
Or, since you added the "jquery" tag, you can also use:
$.each(data, function() {
newData[this.Code] = {name: this.Name, population: this.Population};
});
Try with native map of javascript
var newData = data.map(function (obj) {
var newObj = {};
newObj[obj.Code] = {};
newObj[obj.Code].name = obj.Name;
newObj[obj.Code].population = obj.Population;
return newObj;
});
console.log(newData)
[{
"US-AL":{
"name":"Alabama",
"population":4833722
}
},
{
"US-AK":{
"name":"Alaska",
"population":735132
}
},
{
"US-AZ":{
"name":"Arizona",
"population":6626624
}
},
{
"US-AR":{
"name":"Arkansas",
"population":2959373
}
},
{
"US-CA":{
"name":"California",
"population":38332521
}
},
{
"US-CO":{
"name":"Colorado",
"population":5268367
}
},
{
"US-CT":{
"name":"Connecticut",
"population":3596080
}
}
]
And the code:
var newDatas = datas.map(function(item) {
var obj = {};
obj[item.Code] = { name: item.Name, population: item.Population };
return obj;
});
datas is the array containing your original source.
I am quite baffled as why even though my ingredients get populated correctly in the list and rendered, when I change the value of for example first ingredient's "Dosage Reference System" it then gets mixed up with the Dosage Reference System's value of the last item in the array?
The values in each row don't update according to the values in that row
Any help would be appreciated:
Here is the fiddle: http://jsfiddle.net/makeitmorehuman/C6AvC/
Code for reference here is:
function ingredient(data) {
ingr = this;
ingr.Name = ko.observable(data.Name);
ingr.UnitCost = ko.observable(data.UnitCost);
ingr.DRS = ko.observable(data.DRS);
ingr.DP = ko.observable(data.DP);
ingr.PercenChange = ko.computed(function () {
return Math.round(ingr.DP() - ingr.DRS());
});
ingr.RawMaterialRS = ko.computed(function () {
return Math.round((ingr.DRS() / 100) * ingr.UnitCost() * 10000);
});
ingr.RawMaterialCostProp = ko.computed(function () {
return Math.round((ingr.DP() / 100) * ingr.UnitCost() * 10000);
});
ingr.CostDifference = ko.computed(function () {
return Math.round(ingr.RawMaterialCostProp() - ingr.RawMaterialRS());
});
}
function ingredientsData() {
return [
{ "Name": "Skimmed milk", "UnitCost": 0.40, "DRS": 70, "DP": 87 },
{ "Name": "Cream 40% fat", "UnitCost": 1.80, "DRS": 18, "DP": 9 },
{ "Name": "Skim Milk Powder", "UnitCost": 2.5, "DRS": 12, "DP": 1 },
{ "Name": "N-Dulge SAI", "UnitCost": 3.5, "DRS": 0, "DP": 2 },
{ "Name": "Novation Indulge 1720", "UnitCost": 3.9, "DRS": 0, "DP": 1 }
];
}
function NovationIndulge() {
var self = this;
self.Ingredients = ko.observableArray();
self.init = function () {
ko.utils.arrayForEach(ingredientsData(), function (item) {
self.Ingredients.push(new ingredient(item));
});
};
function SumOfItems(propertyToSum) {
var total = 0;
ko.utils.arrayForEach(self.Ingredients(), function (item) {
total = parseInt(total) + parseInt(item[propertyToSum]());
});
return total;
}
self.TotalDRS = ko.computed(function () { return SumOfItems("DRS"); });
self.TotalDP = ko.computed(function () { return SumOfItems("DP"); });
self.TotalCostDiff = ko.computed(function () { return SumOfItems("CostDifference"); });
self.TotalRawMaterialRS = ko.computed(function () { return SumOfItems("RawMaterialRS"); });
self.TotalRawMCP = ko.computed(function () { return SumOfItems("RawMaterialCostProp") });
self.AnnualFinishedProduct = ko.observable(4000);
self.TotalCostSavingP1000 = ko.computed(function () { return self.TotalCostDiff() * -1 });
self.TotalAnnualSaving = ko.computed(function () {
return self.TotalCostSavingP1000() * self.AnnualFinishedProduct() / 1000;
});
}
var NI = new NovationIndulge();
NI.init();
ko.applyBindings(NI);
My first guess would be that because you define
function ingredient(data) {
ingr = this;
...
without the var keyword, it will instead create a global property (belonging to window).
Then, every time a function in your prototype runs, stuff is messed up.
This was a nice one. The offending line is this:
ingr = this;
should be
var ingr = this;
Updated fiddle: http://jsfiddle.net/6nXYE/1/