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
Related
I have a javascript code which contains more number of functions. inside each functions code looks similar. Is there any way to reduce and optimize the code using javascript oop. So my script goes like this.
function cal_a() {
var a_list = [];
function fetch_dom() {
var a = document.getElementById("pOne");
a.innerHTML = "Hello";
a_list.push("Hello");
}
fetch_dom();
}
function cal_b() {
var b_list = [];
function fetch_dom() {
var b = document.getElementById("pTwo");
b.innerHTML = "World";
b_list.push("World");
}
fetch_dom();
}
cal_a();
cal_b();
//..
//..
//..
//cal_z();
HTML code looks
<p id="pOne"></p>
<p id="pTwo"></p>
Please pardon me if the question is wrong. Thanks in advance.
I have to say the list doesn't do anything here
function cal(id, text) {
var list = [];
function fetch_dom() {
var el = document.getElementById(id);
el.innerHTML = text;
list.push(text);
}
fetch_dom();
}
cal('id', 'text');
Sure, pull out the common parts and make a function which returns a function.
function make_cal(elem_id, text) {
return function() {
var list = [];
function fetch_dom() {
var b = document.getElementById(elem_id);
b.innerHTML = text;
list.push(text);
}
fetch_dom();
}
}
let cal_a = make_cal("pOne", "Hello");
let cal_b = make_cal("pTwo", "World");
The fetchDom is better to be placed on object constructor:
function Cal(elClass, text) {
this.list = [];
this.elClass = elClass;
this.text = text;
}
Cal.prototype.fetchDom = function() {
var el = document.getElementById(this.elClass);
el.innerHTML = this.text;
this.list.push(el);
};
var calA = new Cal("pOne", "Hello");
var calB = new Cal("pTwo", "World");
calA.fetchDom();
calB.fetchDom();
Then you can access your lists by:
calA.list;
calB.list;
I defined a JavaScript function using a custom service and I called this function using the service in my controller. This function uses two parameters: The first one is input which I am getting by hitting the below API and the second one is the value of the year which I'm getting using ng-model directive. When I am calling this function in my controller I am getting an error like type is not defined or id is not defined etc. Is it the right way to call a JavaScript function in the controller. Please suggest me.
$http.get("http://152.144.218.70:8080/USACrime/api/crimeMultiple?city=" +$scope.strCity + "&crime=" + $scope.type1 + "&model=" + model).success(function (result) {
$scope.prograssing = false;
console.log("manisha", $scope.strCity);
console.log("kanika", result);
$scope.output = result;
console.log("monga", $scope.output);
$scope.hex = hexafy.year_city($scope.output,$scope.type);
console.log("service", $scope.hex);
});
myapp.js
var app= angular.module("myApp",["ngRoute","leaflet-directive","pb.ds.components"]);
var geomarker = new L.FeatureGroup();
app.service('hexafy', function() {
this.year_city = function (input2,years) {
if(years.toLowerCase()=="all"){
years = "2012,2013,2014,2015,2016,2017,2018,2019";
}
var yrs = years.split(",");
output = {};
outerBoundary = {};
boundary = {};
boundary["boundaryId"] = input[0]["id"];
boundary["boundaryType"] = input[0]["type"];
boundary["boundaryRef"] = "C1";
outerBoundary["boundary"] = boundary;
output["boundaries"] =outerBoundary;
themes = [];
for(var i in input){
crimeTheme = {};
crimeThemeValue = {};
crimeThemeValue["boundaryRef"] = "C1";
result = [];
for(var j in input[i]["prediction"]){
dict = {};
if(yrs.indexOf(input[i]["prediction"][j]["year"])>-1){
dict["name"] = input[i]["prediction"][j]["year"]+" "+input[i]["crime"]+" Crime";
dict["description"] = input[i]["crime"]+" Crime for "+input[i]["prediction"][j]["year"];
dict["value"] = input[i]["prediction"][j]["count"];
dict["accuracy"] = input[i]["accuracy"];
result.push(dict);
}
}
crime = input[i]["crime"].toLowerCase()+"CrimeTheme";
crimeThemeValue["individualValueVariable"] = result;
console.log('crimeThemeValue["individualValueVariable"]',crimeThemeValue["individualValueVariable"]);
crimeTheme[crime] = crimeThemeValue;
themes.push(crimeTheme);
console.log("themes",JSON.stringify(themes));
}
output["themes"] = themes;
console.log(output);
return output;
};
});
});
1) .success and .error methods are deprecated and it is not good to go with it. Instead you'd better use .then(successCallback, errorCallback)
2) To use a service method the proper way is to it like this:
app.service('myService', function() {
var service = {
method:method
};
return service;
function method() {
//Logic
}
})
So in your case the way to go is:
app.service('hexafy', function () {
return {
years_city: function (input2, years) {
if (years.toLowerCase() == "all") {
years = "2012,2013,2014,2015,2016,2017,2018,2019";
}
var yrs = years.split(",");
output = {};
outerBoundary = {};
boundary = {};
boundary["boundaryId"] = input[0]["id"];
boundary["boundaryType"] = input[0]["type"];
boundary["boundaryRef"] = "C1";
outerBoundary["boundary"] = boundary;
output["boundaries"] = outerBoundary;
themes = [];
for (var i in input) {
crimeTheme = {};
crimeThemeValue = {};
crimeThemeValue["boundaryRef"] = "C1";
result = [];
for (var j in input[i]["prediction"]) {
dict = {};
if (yrs.indexOf(input[i]["prediction"][j]["year"]) > -1) {
dict["name"] = input[i]["prediction"][j]["year"] + " " + input[i]["crime"] +
" Crime";
dict["description"] = input[i]["crime"] + " Crime for " + input[i]["prediction"]
[j]["year"];
dict["value"] = input[i]["prediction"][j]["count"];
dict["accuracy"] = input[i]["accuracy"];
result.push(dict);
}
}
crime = input[i]["crime"].toLowerCase() + "CrimeTheme";
crimeThemeValue["individualValueVariable"] = result;
console.log('crimeThemeValue["individualValueVariable"]', crimeThemeValue[
"individualValueVariable"]);
crimeTheme[crime] = crimeThemeValue;
themes.push(crimeTheme);
console.log("themes", JSON.stringify(themes));
}
output["themes"] = themes;
console.log(output);
return output;
}
}
})
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 loading in a js file to build a form (I know this isn't standard; this is just for my learning). The contents of that file look like this:
window.captor = (function () {
function Captor () {
}
var captor = {
create: function () {
return new Captor();
}
};
Captor.prototype.build = function (json) {
//CREATE BACKDROP WITH CLOSE FUNCTION
var interstitial = this.backdrop();
//CREATE DIV CONTAINER
var container = this.container();
//CREATE TITLE
var title = this.setTitle();
//CREATE CALL TO ACTION
var cta = this.callToAction();
//CREATE FORM WITH INPUTS
var form = this.capture(json);
interstitial.appendChild(container);
container.appendChild(title);
container.appendChild(cta);
container.appendChild(form);
document.body.parentNode.appendChild(interstitial);
};
Captor.prototype.backdrop = function(){
var b = document.createElement("div");
b.setAttribute('style',"position:fixed;width:100%;height:100%;background: rgba(0,0,0,.6);z-index: 100;");
return b;
};
Captor.prototype.container = function(){
var c = document.createElement("div");
c.setAttribute('style',"position:relative;background:#dedede;min-height:100px;width: 480px;margin: auto;top: 45%;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;");
return c;
};
Captor.prototype.setTitle = function(){
var t = document.createElement("h1");
var inside = document.createTextNode("Join Our Newsletter");
t.appendChild(inside);
return t;
};
Captor.prototype.callToAction = function(){
var cta = document.createElement("p");
var inside = document.createTextNode("Would you like to find out more about stuff? Join our newsletter!");
cta.appendChild(inside);
return cta;
};
Captor.prototype.capture = function(json){
var f = document.createElement("form");
var hidden = document.createElement("input");
hidden.setAttribute('type',"hidden");
f.appendChild(hidden);
return f;
};
return captor;
}());
Then after including that file, I call:
var n = captor.create();
n.build(window.builder.getj);
Where window.builder.getj returns a json object (I haven't done anything with that obj, just yet).
So far, the form doesn't build. I'm not sure if anything is getting called. When I look at the console, nothing is output. If I call var c = captor.create(); it returns undefined. If I run c = captor.create(); it returns Captor {build: function, backdrop: function, container: function, setTitle: function, callToAction: function…}.
I feel like I must be missing something, but for the life of me I can't see what it is. How do I get this form to render in the correct way?