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().
Related
I am using Parse data, but the deal is, i want to return the variable ParseUserArray, but just after it passing by the success promisse. I was wondering how can i do that.
var UserWs = angular.module('UserWs', []);
UserWs.service('UserWsService', ['parseInit', function(parseInit){
var service = this;
this.getUserAtParse = function(id){
var user = Parse.Object.extend("User");
var query = new Parse.Query(user);
var parseUserArray = [];
query.find({
success: function(anUser) {
for (var i = 0; i < anUser.length; i++) {
var newUser = new User(anUser[i]);
parseUserArray.push(newUser);
}
console.log(parseUserArray);
}
});
var User =function(anUser){
this.id = anUser.id;
this.name = anUser.get("name");
this.email = anUser.get("username");
this.company = anUser.get("company");
}
return parseUserArray;
};
thanks in advance :)
You can use promise for this - $q service
var UserWs = angular.module('UserWs', []);
UserWs.service('UserWsService', ['$q', 'parseInit', function($q, parseInit) {
var service = this;
this.getUserAtParse = function(id) {
var defer = $q.defer();
var user = Parse.Object.extend("User");
var query = new Parse.Query(user);
var parseUserArray = [];
query.find({
success: function(anUser) {
for (var i = 0; i < anUser.length; i++) {
var newUser = new User(anUser[i]);
parseUserArray.push(newUser);
}
console.log(parseUserArray);
defer.resolve(parseUserArray);
}
});
var User = function(anUser) {
this.id = anUser.id;
this.name = anUser.get("name");
this.email = anUser.get("username");
this.company = anUser.get("company");
}
return defer.promise;
}
}]);
UserWs.controller('sampleCtrl', ['$scope', 'UserWsService', function($scope, UserWsService) {
UserWsService.getUserAtParse(SOME_ID).then(function(resultArray) {
//logic here
});
}]);
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 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 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.
}
I am fairly new to using callback functions in Javascript. I'm also not sure, if the callback is my problem.
I fetch some data from a Database and want to save it to a Objekt with the .push method.
After pushing it in there I log this object and it logs the correct data. So the databaseconnection can't be the problem.
I'm working with kinda a model-view-controller model and want the controller to pass data from the model to the view component. If I try the Models get-method I get an empty object.
I tried to find out where the data gets lost by logging as you can see in the init-function where getData() gets called. This log already returns a "undefined undefined".
Has anyone an idea why this happens or does anyone see a principal missunderstanding of my usage of callback methods or so?
I would really appreciate some help here.
Thanks in advance ;)
DetailStart.Detail = (function() {
var that = {},
vermieterDataObject = null,
erstellerDataObject = null,
objektDataObject = null,
vermieterData = null,
einstellerData = null,
objektData = null,
objectId = null,
init = function() {
console.log("init Detail.js");
setupParse();
getData(function(){
console.log(einstellerData);
console.log(vermieterData);
$(that).trigger("setWohnungsDetails");
});
return that;
},
getData = function(callback) {
getObjektData(function(einsteller, vermieter){
getVermieterData(vermieter);
getEinstellerData(einsteller);
});
callback();
},
getEinstellerData = function(einsteller){
einstellerData = [];
var queryEinsteller = new Parse.Query(erstellerDataObject);
queryEinsteller.equalTo("ID", parseInt(einsteller));
queryEinsteller.first({
success: function(einsteller) {
var vorname = einsteller.get("Vorname");
var nachname = einsteller.get("Nachname");
var strasse = einsteller.get("Strasse");
var hausnummer = einsteller.get("Hausnummer");
var plz = einsteller.get("PLZ");
var ort = einsteller.get("Ort");
var email = einsteller.get("Email");
var telefon = einsteller.get("Telefon");
einstellerData.push({ vorname: vorname, nachname: nachname, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, email: email, telefon: telefon });
console.log(einstellerData);
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
},
getVermieterData = function(vermieter){
vermieterData = [];
var queryVermieter = new Parse.Query(vermieterDataObject);
queryVermieter.equalTo("ID", parseInt(vermieter));
queryVermieter.first({
success: function(vermieter) {
var vorname = vermieter.get("Vorname");
var nachname = vermieter.get("Nachname");
var strasse = vermieter.get("Strasse");
var hausnummer = vermieter.get("Hausnummer");
var plz = vermieter.get("PLZ");
var ort = vermieter.get("Ort");
var email = vermieter.get("Email");
var telefon = vermieter.get("Telefon");
vermieterData.push({ vorname: vorname, nachname: nachname, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, email: email, telefon: telefon });
console.log(vermieterData);
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
},
getObjektData = function(callback) {
objectId = localStorage.getItem("currentWohnung");
objektData = [];
var queryObjekt = new Parse.Query(objektDataObject);
queryObjekt.get(objectId, {
success: function(wohnung) {
var vermieter_id = wohnung.get("Vermieter_id");
var einsteller_id = wohnung.get("Einsteller_id");
var strasse = wohnung.get("Strasse");
var hausnummer = wohnung.get("Hausnummer");
var plz = wohnung.get("PLZ");
var ort = localStorage.getItem("selectedStadt");
var bild = wohnung.get("Bild");
var flaeche = wohnung.get("Flaeche");
var freitext = wohnung.get("Freitext");
var gesamtmiete = wohnung.get("Gesamtmiete");
var kaution = wohnung.get("Kaution");
var miete = wohnung.get("Miete");
var nebenkosten = wohnung.get("Nebenkosten");
var raucher = wohnung.get("Raucher");
var zimmer = wohnung.get("Zimmer");
objektData.push({ vermieter_id: vermieter_id, einsteller_id: einsteller_id, strasse: strasse, hausnummer: hausnummer, plz: plz, ort: ort, bild: bild, flaeche: flaeche, freitext: freitext, gesamtmiete: gesamtmiete, kaution: kaution, nebenkosten:nebenkosten, raucher: raucher, zimmer: zimmer });
console.log(objektData);
callback(einsteller_id, vermieter_id);
},
error: function(object, error) {
console.log("error" + error);
}
});
},
getObjekt = function() {
return objektData;
},
getVermieter = function() {
return vermieterData;
},
getEinsteller = function() {
return einstellerData;
},
setupParse = function() {
Parse.initialize("ApplicationKey");
objektDataObject = Parse.Object.extend(localStorage.getItem("selectedStadt"));
erstellerDataObject = Parse.Object.extend("Anbieter");
vermieterDataObject = Parse.Object.extend("Vermieter");
};
that.getObjekt = getObjekt;
that.getVermieter = getVermieter;
that.getEinsteller = getEinsteller;
that.init = init;
return that;
})();
I tried it with a Promise. But I guess I don't exactly understand how this works. Even after checking several blogs about this topic.
Here is my try:
init = function() {
console.log("init Detail.js");
setupParse();
getData().then(function(){
console.log(einstellerData);
console.log(vermieterData);
$(that).trigger("setWohnungsDetails");
});
return that;
},
getData = function() {
var promise = new Promise();
getObjektData(function(einsteller, vermieter){
getVermieterData(vermieter);
getEinstellerData(einsteller);
});
promise.resolve();
return promise;
},
Can anyone help me and tell me what I missunderstood here please?
I'm guessing queryObjekt.get in getObjektData is asynchronous whereas getData expects getObjectData to be immediate.
If you're having trouble with linking up asynchronous events and their result data I'd recommend you to look at the concept of promises. Look for Promises/A or Deferreds. With promises you don't have to pass callbacks all the time, instead you have an intermediate promise object that will eventually have the value. You add the callback to the promise, not the function producing the promise.