I have a question about the promise system in AngularJS and the creation of services. I have a service called Customer:
angular.module("app").factory("Customer", ["CustomerDBServices", "OfficesList", "$q",
function(CustomerDBServices, OfficesList, $q){
return function(customerID){
var self = this;
//attributes
this.name = null;
this.ID = null;
this.code = null;
this.isVisible = 1;
this.showOffices = true;
this.offices = new OfficesList();
//constructor
if(typeof customerID !== "undefined"){
var metacustomer = CustomerDBServices.find({ID:customerID}, function(){
self.name = metacustomer.results.customer_name;
self.ID = metacustomer.results.customer_ID;
self.code = metacustomer.results.customer_internal_code;
self.isVisible = metacustomer.results.customer_is_visible;
self.getOffices();
});
}
//add office to customer
this.addNewOffice = function(){
self.offices.addNewOffice();
};
//remove office from customer
this.removeOffice = function(officeIndex){
self.offices.removeOffice(officeIndex);
};
//show offices
this.toggleOfficeVisibility = function(officeIndex){
self.offices.toggleOfficeVisibility(officeIndex);
};
}]);
In the "constructor" part of this service there is an AJAX call to a service that loads the attributes of the customer from the database. This is an async task. How can I create a promise in this situation? I use the customer service like this:
var customer = new Customer(ID);
and I would like to do something like
var customer = new Customer(ID).then(
function(){...}, //success
function(){...} //error
);
To do this I need a promise. Do I have to program a method create() within the customer service?
angular.module("app").factory("Customer", ["CustomerDBServices", "OfficesList", "$q",
function(CustomerDBServices, OfficesList, $q){
return function(customerID){
var self = this;
//attributes
this.name = null;
this.ID = null;
this.code = null;
this.isVisible = 1;
this.showOffices = true;
this.offices = new OfficesList();
//costructor
this.create = function(){
if(typeof customerID !== "undefined"){
var rest = $q.defer();
var metacustomer = CustomerDBServices.find({ID:customerID}, function(){
self.name = metacustomer.results.customer_name;
self.ID = metacustomer.results.customer_ID;
self.code = metacustomer.results.customer_internal_code;
self.isVisible = metacustomer.results.customer_is_visible;
self.getOffices();
rest.resolve("ok!");
});
return rest.promise;
}
}
...
...
...
}]);
and then use that stuff like this?
var customer = new Customer();
customer.create(ID).then(
function(){...},
function(){...},
)
Isn't there a way to call the "new Customer" and receive a promise? Thank you in advance!
Like I said in my comment I recommend against this approach. Putting complex asynchronous logic in a constructor is usually confusing and does not make for a very good or clear API.
That said, You don't need a .create method.
The trick is: If a function called as a constructor returns an object in JavaScript - it is returned instead of the this value.
Sparing you the whole Angular around it:
function(CustomerDBServices, OfficesList, $q){
return function(customerID){
var p = $q.defer();
var that = p.promise; // our 'that' is now a promise
//attributes
that.name = null;
that.ID = null;
that.code = null;
that.isVisible = 1;
that.showOffices = true;
that.offices = new OfficesList();
// use `that` instead of this in additional code
if(typeof customerID !== "undefined"){
var metacustomer = CustomerDBServices.find({ID:customerID}, function(){
self.name = metacustomer.results.customer_name;
self.ID = metacustomer.results.customer_ID;
self.code = metacustomer.results.customer_internal_code;
self.isVisible = metacustomer.results.customer_is_visible;
self.getOffices();
that.resolve("ok!");
});
}
return that; // we return the promise here.
}
Related
Having a really weird problem with Angular and wondering if anyone has encountered this.
var transformResponse = function(data) {
var jobs = data.job.map(convertResponseToJob);
console.log(jobs);
// return jobs;
}
This logs the correct array with all the values within it, but this logs an array of the same length with undefined as each value.
var transformResponse = function(data) {
var jobs = data.job.map(convertResponseToJob);
console.log(jobs);
return jobs;
}
This may be something really obvious as I haven't worked with Angular factories very much, but I couldn't find an explanation.
Other Functions:
function convertResponseToJob(response){
var jobObj = new Job(response.id, response.clientId, response.book);
jobObj.bookName = response.book.name;
jobObj.submitDate = response.createDate;
jobObj.priority = response.priority;
jobObj.status = response.status;
jobObj.sequence = response.seqOrder;
return jobObj;
}
function Job(jobId, client, book) {
this.jobId = jobId;
this.client = client;
this.book = book;
this.bookName = null;
this.submitDate = null;
this.priority = 2;
this.sequence = 2;
this.status = null;
}
I'm making a file system, but can't figure out how to add a "parent" property.
currently I think my issue is that I can't call a function that hasn't been declared yet, but I don't see how to escape this circular logic then.
the current error is:
Uncaught TypeError: inputDir.getParentDirectory is not a function
and my code is:
var file = function(FileName,inputDir,isDir){
this.Name=FileName;
this.CurrentDir=inputDir;
this.isDirectory = isDir;
this.size = 0;
this.timeStamp = new Date();
if(isDir===true){
this.subfiles = [];
}
if(inputDir!==null){
this.parentDir = inputDir.getParentDirectory();
}
this.rename = function(newName){
this.Name = newName;
};
this.updateTimeStamp = function(){
this.timeStamp = new Date();
};
};
file.prototype.getParentDirectory = function(){
return this.parentDir;
};
var fileSystem = function(){
this.root = new file("root",null,true);
this.createFile = function(name,currentDirectory,isDirectory){
var f = new file(name,currentDirectory,isDirectory);
currentDirectory.subfiles.push(f);
};
};
var myComputer = new fileSystem();
myComputer.createFile("Desktop","root",true);
You are passing a string to inputDir which causes the error you are seeing since the getParentDirectory() method is defined for file prototype, not string. Instead you need to pass in an instance of file. Another option would be to write code to lookup an instance of file by string.
var file = function(FileName,inputDir,isDir){
this.Name=FileName;
this.CurrentDir=inputDir;
this.isDirectory = isDir;
this.size = 0;
this.timeStamp = new Date();
if(isDir===true){
this.subfiles = [];
}
if(inputDir!==null){
this.parentDir = inputDir.getParentDirectory();
}
this.rename = function(newName){
this.Name = newName;
};
this.updateTimeStamp = function(){
this.timeStamp = new Date();
};
};
file.prototype.getParentDirectory = function(){
return this.parentDir;
};
var fileSystem = function(){
this.root = new file("root",null,true);
this.createFile = function(name,currentDirectory,isDirectory){
var f = new file(name,currentDirectory,isDirectory);
currentDirectory.subfiles.push(f);
};
};
var myComputer = new fileSystem();
myComputer.createFile("Desktop",myComputer.root,true);
console.log("myComputer:", myComputer);
console.log("Desktop:", myComputer.root.subfiles[0]);
Hi folks trying to get a simple setintervel working to automatically refresh my data every minute. The line im having issues with is this:
setInterval(incidentViewModel.fetchdata,60000);
I had also tried this:
window.setInterval(incidentViewModel.fetchdata,60000);
Both of these give me the same error:
Uncaught TypeError: self.incidents is not a function
Im not seeing anything obvious that's causing the problem, would anyone have any idea?
Here is my full code:
function IncidentViewModel() {
var self = this;
self.incidents = ko.observableArray();
self.currentIncident = ko.observable();
self.showModal = ko.observable(false);
self.fetchdata = function() {
Incident.BASE_URL = '../../../../_vti_bin/listData.svc/GDI_PROD_Incidents';
Incident.CREATE_HEADERS = {"accept": "application/json;odata=verbose"};
Incident.UPDATE_HEADERS = {"accept": "application/json;odata=verbose","If-Match": "*"};
var self = this;
$.getJSON(Incident.BASE_URL+filterlist+orderlist,
function(data) {
if (data.d.results) {
self.incidents(data.d.results.map(function(item) {
return new Incident(item);
}));
$('#loading').hide("slow");
$('#IncidentTable').show("slow");
} else {
console.log("no results received from server");
}
}).fail(function() {
console.log("error", params, arguments);
});
console.log("Im done fetching data, pheww!");
}
}
function DataItem(data) {
//console.log(data);
this.Name = ko.observable(data.Name);
this.Price = ko.observable(data.Price);
}
function Incident(data) {
var self = this;
self.ID = data.ID;
self.Description = ko.observable(data.Description);
self.Composante = ko.observable(data.Composante);
self.Incident = ko.observable(data.Incident);
self.ÉtatValue = ko.observable(data.ÉtatValue);
self.PrioritéValue = ko.observable(data.PrioritéValue);
self.Duré = ko.observable(data.Duré);
self.Date_de_début = ko.observable(data.Date_de_début);
self.Date_de_fin = ko.observable(data.Date_de_fin);
self.Groupe_Support_Prime = ko.observable(data.Groupe_Support_Prime);
self.Autres_Groupe_Support_Prime = ko.observable(data.Autres_Groupe_Support_Prime);
self.ResponsableValue = ko.observable(data.ResponsableValue);
self.Impact = ko.observable(data.Impact);
self.Temps_Consacré = ko.observable(data.Temps_Consacré);
self.Type_de_tempsValue = ko.observable(data.Type_de_tempsValue);
self.Journal_des_actions = ko.observable(data.Journal_des_actions);
self.Dépanage = ko.observable(data.Dépanage);
self.Journal_des_actions = ko.observable(data.Journal_des_actions);
self.Suivi = ko.observable(data.Suivi);
self.Ressources = ko.observable(data.Ressources);
}
var incidentViewModel = new IncidentViewModel();
ko.applyBindings(incidentViewModel);
setInterval(incidentViewModel.fetchdata,60000);
Remove var self = this; inside the self.fetchdata function because you should be referring to the self inside the IncidentViewModel function when referring to self.incidents().
I am trying to call the method getTitulo, getDuracion and getLink inside the cancion.js file but when i call the function it returns the following error: "listaCanciones_Lcl[i].getTitulo is not a function". I have searched in different websites but i didnt got lucky with finding an answer. Hopefully someone here can give me some help, i will gladly appreciate it!
//Logic.js file
var listaCanciones = [],
ejecuTitulo = '',
ejecuDuracion = '',
ejecuLink = '';
var btnGenerarLista = document.getElementById("addList").addEventListener("click", agregarCanc);
var btnAgregarLista = document.getElementById("gnrList").addEventListener("click", llenarTabla);
function agregarCanc (){
var nameSong = document.querySelector('#nameSong').value;
var duraSong = document.querySelector('#duraSong').value;
var linkSong = document.querySelector('#linkSong').value;
var objCancion = new Cancion(nameSong, duraSong, linkSong);
listaCanciones.push(objCancion);
var listaCancionesJson = JSON.stringify(listaCanciones);
localStorage.setItem('json_canciones', listaCancionesJson);
}
function llenarTabla (titulo){
var celdaTitulo = document.querySelector('#tituloList'),
celdaDuracion = document.querySelector('#duracionList'),
celdaLink = document.querySelector('#linkList'),
listaCanciones_Lcl = JSON.parse(localStorage.getItem('json_canciones'));
for(var i=0; i<listaCanciones_Lcl.length;i++){
// Acceder a lista canciones
I am getting an error in this line, where is says "getTitulo" is not a function but i dont really know why?
var nodoTextoTitulo = document.createTextNode(listaCanciones_Lcl[i].getTitulo()),
nodoTextoDuracion = document.createTextNode(listaCanciones_Lcl[i].getDuracion()),
nodoTextoLink = document.createTextNode(listaCanciones_Lcl[i].getLink());
// Create td
var elementoTdTitulo = document.createElement('td'),
elementoTdDuracion = document.createElement('td'),
elementoTdLink = document.createElement('td');
// Celda Id Append Child
elementoTdTitulo.appendChild(nodoTextoTitulo);
elementoTdDuracion.appendChild(nodoTextoDuracion);
elementoTdLink.appendChild(nodoTextoLink);
// Fila Append Child
celdaTitulo.appendChild(elementoTdTitulo);
celdaDuracion.appendChild(elementoTdDuracion);
celdaLink.appendChild(elementoTdLink);
}
}
//Cancion.js File
var Cancion = function(pTitulo, pDuracion, pLink){
var id = 0;
var titulo = pTitulo;
var duracion = pDuracion;
var link = pLink;
this.getId = function (){
return id;
};
this.setTitulo = function (pTitulo){
titulo = pTitulo;
};
this.getTitulo = function(){
return titulo;
};
this.setDuracion = function(pDuracion){
duracion = pDuracion;
};
this.getDuracion = function(){
return duracion;
};
this.setLink = function (pLink){
link = pLink;
};
this.getLink = function(){
return link;
};
};
First, make sure you are loading the Cancion.js file before the others in your HTML. Your problem is that when you parse the JSON back out of local storage, Cancion is not a known object, so getTitulo is undefined. You'll have to do listaCanciones_Lcl[i].titulo; instead.
And another change you'll need is to loosen the scope of your variables. The reason you need this.x = pX is because before JSON.stringify(new Cancion(1, 2, 3)) just returned "{}". With this code it returns "{"id":0,"titulo":1,"duracion":2,"link":3}", which I think is what you were after.
function Cancion(pTitulo, pDuracion, pLink){
this.id = 0;
this.titulo = pTitulo;
this.duracion = pDuracion;
this.link = pLink;
this.getId = function (){
return this.id;
};
this.setTitulo = function (pTitulo){
this.titulo = pTitulo;
};
this.getTitulo = function(){
return this.titulo;
};
this.setDuracion = function(pDuracion){
this.duracion = pDuracion;
};
this.getDuracion = function(){
return this.duracion;
};
this.setLink = function (pLink){
this.link = pLink;
};
this.getLink = function(){
return this.link;
};
};
var objWithFunction = {
name: 'Object with Function',
getName: function() { return this.name }
};
undefined
objWithFunction.getName() // --> "Object with Function"
var string = JSON.stringify(objWithFunction)
string // -=> "{"name":"Object with Function"}"
JSON is for data only..
Better you create a model, and fill it with data.. but this model has to exist in your application.. or you load the model parallel to your data..
function SomeThing() {};
SomeThing.prototype.getName = function() { return this.name };
var Thing1 = new SomeThing(JSON.parse("{name:'ThingOne'}"));
Thing1.getName(); // ThingOne
I am trying to set a variable that will depend on two others, but I don't want that computed
variable reacts on the initializing of one of these vars.
var viewModel = function() {
var self = this;
self.first = ko.observable("");
self.second = ko.observable();
self.doSmth = function() {
self.second(self.second() + 1);
};
self.init = function(o){
self.second(o);
};
self.comp = ko.computed(function(){
self.first();
self.second();
alert(self.second());
});
};
var vm = new viewModel();
ko.applyBindings(vm);
vm.init(111);
http://jsfiddle.net/TCAHS/1/
Alert message should appear only when I click on the button and dependent variable value was changed. And no messages with 'undefined' and init value '111'. Is there any built-in solution? Thanks.
I'll go with the easy solution... what about setting a flag to check whether the observable has been initialized, something like:
var viewModel = function() {
var self = this;
self.first = ko.observable("");
self.second = ko.observable();
self.doSmth = function() {
self.second(self.second() + 1);
};
self.init = function(o){
self.second(o);
};
var initialized = false;
self.comp = ko.computed(function(){
self.first();
self.second();
if (initialized) {
alert(self.second());
}
initialized = true;
});
};
var vm = new viewModel();
ko.applyBindings(vm);
vm.init(111);
And here's the fiddle.