We Keep Coding

javascript line graph not adjusting with dropdown selection

I have this code that creates a line graph. Each line represents a year as it moves along the x-axis (months). It's collecting the data from AL but when I use the dropdown to change to another state, it does not change, the data stays the same.
const ddlList = ['AL','AK','AZ','AR','CA','CO','CT','DE','DC','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY']
let myddl = d3.select('select');
// Create DDL from names list - working code option 2 - keep for future reference
Object.entries(ddlList).forEach(([key,value])=> {
currentValue = value;
console.log(currentValue)
let newOption = d3.select('select').append('option');
newOption.attr('value',currentValue)
newOption.text(currentValue)
});
let state = 'AL'
let dropdown = d3.select("#selDataset");//selects by html id
dropdown.on("change", function() {//when there is a change in the selection, do the function
userChoice = this.value; //captures the userChoice from the ddl as the Test Sample ID (940)
console.log(userChoice);
});
const dataPromise = d3.json(urlLine);
console.log("Data Promise: ", dataPromise);
//let overdoses
d3.json(urlLine).then(function(dataC) {
console.log(dataC)
let state_data = dataC.filter(object => object.state == 'AL')
let overdoses = LineGraph(state_data)
console.log(overdoses)
renderChart(overdoses)
})
//Line Graph
function LineGraph(rando) {
let year2015 = [], year2016 = [], year2017=[], year2018=[], year2019=[], year2020=[], year2021=[], year2022=[];
/* let dataAsJson = JSC.csv2Json(rando); */
rando.forEach(function (row) {
/* console.log(row)
*/ console.log(row.date)
console.log(Date(row.date))
if(row.year == '2015') {
year2015.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2016') {
year2016.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2017') {
year2017.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2018') {
year2018.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2019') {
year2019.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2020') {
year2020.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2021') {
year2021.push({x: row.month, y:row.overdose_deaths});
} else if (row.year =='2022') {
year2022.push({x: row.month, y:row.overdose_deaths});
}
});
return [
{name:'2015', points: year2015},
{name:'2016', points: year2016},
{name:'2017', points: year2017},
{name:'2018', points: year2018},
{name:'2019', points: year2019},
{name:'2020', points: year2020},
{name:'2021', points: year2021},
{name:'2022', points: year2022}
];
}
/* console.log("Data Promise: ", rando); */
//NOTE: Have not worked on this yet- example code from web article
function renderChart(series) {
JSC.Chart('chartDiv', {
title_label_text: 'Preliminary Overdose Death Data 2015 - 2022',
annotations: [{
label_text: 'Source: CDC',
position: 'bottom left'
}],
legend_visible: false,
xAxis_crosshair_enabled: true,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: '%seriesName <b>%yValue</b> Deaths: ',
series: series
});
}
I've tried moving the d3 call around but I'm not sure that does anything. I'm not sure of next steps. I'm quite new to javascript and I'm stumped on how to get it to switch states.

Cannot access data from component method

I tried components methods in vue js. My code like this.
const Thread = Vue.component('threadpage', function(resolve) {
$.get('templates/thread.html').done(function(template) {
resolve({
template: template,
data: function() {
return {
data: {
title: "Data Table",
count: this.GetData
}
};
},
methods: {
GetData: function() {
var data = {
username : "newshubid",
data : {
page : 0,
length : 10,
schedule : "desc"
}
};
var args = {"data" : JSON.stringify(data)};
var params = $.param(args);
var url = "http://example-url";
var result;
DoXhr(url, params, function(response){
result = JSON.parse(response).data;
console.log("load 1", result);
});
setTimeout(function () {
console.log("load 2", result);
return result;
}, 1000);
}
},
created: function(){
this.GetData();
}
});
});
});
But, when I trying to use {{ data.count }} in template. Not showing result what i want. Even I tried return result in GetData.
Whats my problem ? And how to access data from methods ? Please help me, i'm a beginner. Thanks

See the edited code and comments I added below.
You tried to return the result by using return in the function from setTimeout, which won't help you return value from GetData.
Instead, You can just set the value in the callback function of your ajax request.
const Thread = Vue.component('threadpage', function(resolve) {
$.get('templates/thread.html').done(function(template) {
resolve({
template: template,
data: function() {
return {
data: {
title: "Data Table",
// NOTE just set an init value to count, it will be refreshed when the function in "created" invoked.
count: /* this.GetData */ {}
}
};
},
methods: {
GetData: function() {
var data = {
username : "newshubid",
data : {
page : 0,
length : 10,
schedule : "desc"
}
};
var args = {"data" : JSON.stringify(data)};
var params = $.param(args);
var url = "http://example-url";
var result;
var vm = this;
DoXhr(url, params, function(response){
result = JSON.parse(response).data;
// NOTE set data.count to responsed result in callback function directly.
vm.data.count = result;
});
// NOTE I think you don't need code below anymore.
// setTimeout(function () {
// console.log("load 2", result);
// return result;
// }, 1000);
}
},
created: function(){
this.GetData();
}
});
});
});

What is wrong with my Angularjs service that I get an $injector error?

I am trying to add a service to eliminate some code that I have been repeating through my app.
The service:
/* --------------------------------------------------------------
---------- FUNCTIONS FOR PAGE ALERTS THROUGHOUT Project-------
---------------------------------------------------------------*/
angular.module('app').service('PageAlertService', function () {
this.setAlert = function() {
console.log("In setAlert");
if (localStorage.getItem("Success")) {
var alertObj = {
alert: "Success",
alertMessage: localStorage.getItem("Success")
};
} else if (localStorage.getItem("Error"){
var alertObj = {
alert: "Error",
alertMessage: localStorage.getItem("Error")
};
};
return alertObj;
};
this.errorStatusCheck = function(error, successString) {
if (error.status = -1) {
localStorage.setItem("Success", successString);
} else {
localStorage.setItem("Error", "Error occured: " + error.status + error.statusText);
};
};
});
but whenever I try to add it to any of my controllers I'd like to use it in it breaks my angular web app and gives me the
Error: $injector:unpr
Unknown Provider
Here is my app.js:
var app = angular.module('app',
[
'JobCtrl',
'JobSvc',
'WebsiteCtrl',
'WebsiteSvc',
'myClientCtrl',
'ClientSvc',
'MediaCompanyCtrl',
'MediaCompanySvc',
'PageAlertSvc',
'ui.bootstrap',
'ui.bootstrap.tpls'
]
);
Here is my controller:
/* --------------------------------------------------
-------- Media Jobs Controller ----------------------
--------------------------------------------------- */
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.tpls'])
.controller('JobCtrl',
[
'JobService',
'WebsiteService',
'MediaCompanyService',
'ProductService',
'$scope',
'$uibModal',
'PageAlertService',
function (JobService, WebsiteService, MediaCompanyService,
ProductService, $scope, $uibModal, $uibModalInstance, PageAlertService)
{
/* ------------------------------------
--------- Variables -----------------
-------------------------------------*/
$scope.mediaCompanies = {};
$scope.websites = {};
$scope.products = [];
$scope.selectedProducts = [];
$scope.isSelected = false;
$scope.new = {
Job: {}
};
/* ----------------------------------------------------------------
--- INITIALIZE LISTS OF JOBS, WEBSITES, COMPANIES, AND PRODUCTS ---
------------------------------------------------------------------*/
/* Get Jobs Initialization */
function getJobs() {
JobService.getJobs()
.then(
function (data) {
$scope.total_count = data.JobCount;
$scope.model = data.mediaJobList;
},
function (errResponse) {
console.log("Error while getting jobs");
});
};
getJobs();
/* Get Websites Initialization */
function getWebsites() {
WebsiteService.getWebsites()
.then(
function (data) {
$scope.websites = data;
},
function (errResponse) {
console.log(errResponse);
});
};
getWebsites();
/* Get Companies Initialization */
$scope.getCompanies = function () {
MediaCompanyService.getCompanies()
.then(
function (data) {
$scope.mediaCompanies = data;
},
function (errResponse) {
console.log(errResponse);
});
};
$scope.getCompanies();
/* Get Products -- passing website id*/
$scope.getProducts = function (webid) {
ProductService.getProducts(webid)
.then(
function (data) {
$scope.selectedProducts = data.MediaProductList;
},
function (errResponse) {
console.log(errResponse);
});
};
/* ----------------------------------------------------------------
----------- STILL NEED TO FIGURE OUT WHAT TO DO WITH YOU ----------
------------------------------------------------------------------*/
///* Shows Success and Error Alerts - Maybe make into a directive or
// Service? */
//if (localStorage.getItem("Success")) {
// $scope.alert = "Success";
// $scope.alertMessage = localStorage.getItem("Success");
// localStorage.clear();
//} else if (localStorage.getItem("Error") && localStorage.getItem("Error") !== null) {
// //sometimes get errors even when adding, deleting, updating is successful
// $scope.alert = "Error";
// $scope.alertMessage = localStorage.getItem("Error");
// localStorage.clear();
//};
if (localStorage.getItem("Success") != null || localStorage.getItem("Error") != null) {
console.log("I'm In")
var alert = {};
alert = PageAlertService.setAlert();
//$scope.alert = alert.alert;
//$scope.alertMessage = alert.alertMessage;
localStorage.clear();
}
/* -----------------------------------
------ JOB CRUD FUNCTIONS ----------
-------------------------------------*/
/* Add Job - Also Adds Products to Database */
$scope.addJob = function () {
var successString = "Added Job Succesfully!";
JobService.addJob($scope.new.Job).then(
function (success) {
localStorage.setItem("Success", successString);
},
function (error) {
//if (error.status = -1 && error.status !== 500) {
// localStorage.setItem("Success", successString);
//} else {
// localStorage.setItem("Error", "Error while adding Job! " + error.status + ":" + error.statusText);
//}
PageAlertService.errorStatusCheck(error, successString);
});
//adds products after adding job
addProducts();
location.reload();
}
/* Update Job -- Also Updates Products in Database */
$scope.updateJob = function (job) {
var successString = "Updated Job Succesfully!";
JobService.updateJob(job).then(
function (success) {
localStorage.setItem("Success", successString);
},
function (error) {
//if (error.status = -1 && error.status !== 500) {
// localStorage.setItem("Success", successString);
//} else {
// localStorage.setItem("Error", "Error while updating job! " + error.status + ":" + error.statusText);
//}
PageAlertService.errorStatusCheck(error, successString);
}
);
updateProducts();
location.reload();
}
/* Delete Job */
$scope.deleteJob = function (job) {
var successString = "Deleted Job Succesfully!";
var indx = $scope.model.indexOf(job);
JobService.deleteJob(job.Id).then(
function (success) {
localStorage.setItem("Success", successString);
},
function (error) {
//if (error.status = -1 && error.status !== 500) {
// localStorage.setItem("Success", successString);
//} else {
// localStorage.setItem("Error", "Error occured while deleting job! " + error.status + ":" + error.statusText);
//}
PageAlertService.errorStatusCheck(error, successString);
}
);
location.reload();
}
/* Run Job */
$scope.runJob = function (id, d1, d2) {
$scope.runButtonText = "Running";
//format Date
var date1 = $scope.FormatDate(d1);
var date2 = $scope.FormatDate(d2);
JobService.runJob(id, date1, date2).then(
function (success) {
$scope.runButtonText = "Finished";
},
function (error) {
if (error.status = -1 && error.status !== 500) {
$scope.runButtonText = "Finished";
} else {
$scope.runButtonText = "Error Occured";
console.log(error);
}
});
}
/* ----------------------------------------------------
---------- PRODUCT CRUD FUNCTIONS ---------------------
------------------------------------------------------*/
var addProducts = function () {
ProductService.addOrUpdate($scope.products).then(
function (response) {
console.log(response);
},
function (err) {
console.log(err);
});
};
var updateProducts = function () {
ProductService.addOrUpdate($scope.selectedProducts).then(
function (response) {
console.log(response);
},
function (err) {
console.log(err);
});
};
var deleteProducts = function (product) {
ProductService.deleteProduct(id).then(
function (response) {
console.log(response);
},
function (err) {
console.log(err);
});
};
/* ----------------------------------------------
--------- Code to Manipulate View Model --------
----------------------------------------------*/
/* Toggles Active Toggle Button */
$scope.updateActive = function (job) {
job.Active = !job.Active;
setTimeout(function () {
}, 500);
this.updateJob(job);
}
/* Selects Job and and Gets Product List */
$scope.selectJob = function (job) {
$scope.isSelected = true;
$scope.goToJobSection = false;
$scope.goToEditSection = true;
$scope.selectedJob = {}
$scope.selectedJob = job;
//selects product list by webid
var websiteId = $scope.selectedJob.WebsiteId;
$scope.getProducts(websiteId);
}
/* Onclick Event to stop people from
adding products to database with different
website ids*/
$scope.remProdOnClick = function () {
var newList = [];
if ($scope.goToEditSection == false) {
$scope.products = [];
}
}
/* ----------------------------------------------------------
--- MODAL -- May need to bring this out into a Directive ----
-----------------------------------------------------------*/
/* Shows Modal */
$scope.showModal = function (action, obj) {
$scope.$modalInstance = $uibModal.open({
scope: $scope,
inputs: {
title: action + " Job"
},
restrict: "E",
templateUrl: 'app/modal/JobModals/modal' + action + 'Template.html',
controller: "JobCtrl",
backdrop: 'static',
keyboard: false
});
}
/* Exits Modal */
$scope.exitModal = function () {
$scope.$modalInstance.dismiss('cancel');
};
}]);
I cannot seem to figure out why this is occurring. All my other services are working perfectly.
Thanks!

On your controller declaration, you inject 7 dependencies, but you have 8 as arguments, you are either forgetting to inject one dependency or to delete one argument.
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.tpls'])
.controller('JobCtrl',
[
'JobService',
'WebsiteService',
'MediaCompanyService',
'ProductService',
'$scope',
// missing dependency here
'$uibModal',
'PageAlertService',
function (JobService, WebsiteService, MediaCompanyService,
ProductService, $scope, $uibModal,
$uibModalInstance // or extra dependency here
, PageAlertService)
{
...
}

I tried multiple solutions but the only thing that seemed to work was by putting my service into the folder with all my other services. Once it was moved I no longer got the $injector error I was talking about above.
/MainProject
-/app
-/Common
-/Controllers
JobCtrl.js
OtherCtrl.js
-/Services
JobSvc.js
PageAlertSvc.js
OtherSvs.js
-/Modal
-/Templates
-/Vendor
app.js
As you can see instead of putting the PageAlertSvc.js in Common I had to put it in the Services folder.

In your controller, you should not need to redefine your module (with its associated dependencies) since it is already defined by app.js. Perhaps try attaching your controller to the existing module.
angular
.module('app')
.controller('JobCtrl', ...
Speaking of app.js, you should not need to inject any of your components/controllers/services since they will be programatically attached later.
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.tpls']);

Knockout, how to subscribe to every change in observableArray

can you help me to get subscription on every change of my observable collection and on every item change. Didn't find information on http://knockoutjs.com/documentation/observableArrays.html
$(document).ready(function () {
var Item = function (isSelected, isEnabled, errorState,
name, group, processed, errors, state) {
var self = this;
self._isSelected = ko.observable(isSelected);
self._isEnabled = ko.observable(isEnabled);
self._errorState = ko.observable(errorState);
self._name = ko.observable(name);
self._group = ko.observable(group);
self._processed = ko.observable(processed);
self._errors = ko.observable(errors);
self._state = ko.observable(state);
};
function ViewModel() {
var self = this;
self.SentinelList= ko.observableArray([
ko.observable(new Item(false, false, false, 'Mail1', 'Mailing', 4, 0, 1)),
ko.observable(new Item(false, false, false, 'Ident1', 'Identity', 5, 0, 0)),
ko.observable(new Item(false, false, false, 'Cook', 'Look', 2, 0, 1))]);
}
var vm = new ViewModel();
for (var item in vm.SentinelList) {
item.subscribe(function () {
console.log('List changed');
});
}
ko.applyBindings(vm);
});

You can use the subscribe againt the array :
self.SentinelList.subscribe(function (changes) {
changes.forEach(function (change) {
if (change.status === 'added') {
console.log('new item !!');
change.value.subcriptions.push(change.value.subscribe(event));
} else if (change.status === 'deleted') {
ko.utils.arrayForEach(change.value.subcriptions, function(s) {
if(s) s.dispose();
}
);
console.log('deleted item !!');
}
});
}, null, "arrayChange");
See fiddle

You can use external plugin that tracks changes of view model. For example KO-Reactor
https://github.com/ZiadJ/knockoutjs-reactor
in this case subscription will look like
for(var i = 0; i < vm.SentinelList().length; i++){
ko.watch(vm.SentinelList()[i], { recurse: true }, function(params, modifiedProperty) {
console.log('SentinelList changed');
});
}
JSFIDDLE

Returning data to parent function

I have a function that sends a request to a server and handles the response in a function. I then want to return the response, but I want it to return it to the parent function (getChannelId) so that for example getChannelId('someUsername') would return "someChannelId":
function getChannelId(username) {
function onSearchResponse(response) {
console.log(response);
var channelId = response.items[0].id;
return channelId; /* This is the value I want to return, but I want to return it within the getChannelId function */
console.log({channelId: channelId });
}
var request = window.gapi.client.youtube.channels.list({
part: 'snippet',
forUsername: username,
});
request.execute(onSearchResponse);
}
How do I get the response back to the parent function?

In getchannelid, you should have a variable that the inside function sets. Instead of just returning the result there...
var tmp;
function onSearchResponse(....) {
....
tmp = channelId;
}
Then you can return tmp in the outer function.

Solved it by continuing the schedule in the onSearchRespone callback.
Full code:
requirejs.config({
baseUrl: '//cdnjs.cloudflare.com/ajax/libs',
paths: {
jquery: "jquery/2.0.3/jquery.min",
jqueryColor: "jquery-color/2.1.2/jquery.color.min",
annyang: "annyang/1.0.0/annyang.min",
prefixfree: "prefixfree/1.0.7/prefixfree.min",
gapi: "https://apis.google.com/js/client.js?onload=onGAPILoaded",
gjsapi: "http://www.google.com/jsapi?noext",
ytpapi: "https://www.youtube.com/iframe_api?noext"
/*,
ytdapi: ""*/
}
});
var player, Ice;
function shuffle(o) {
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function onGAPILoaded() {
console.log('Google Client API Loaded, Loading YouTube Data API..');
gapi.client.load('youtube', 'v3', onYTPAPILoaded);
}
function onYTPAPILoaded() {
console.log('YouTube Data API Loaded');
gapi.client.setApiKey('AIzaSyBt4dZrv29ut8U0xeYTRFrgH_rB8zil9_M');
}
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-player', {
height: '720',
width: '1280',
suggestedQuality: 'hd720',
events: {
onStateChange: function(e) {
Ice.state = e.data;
console.log({ STATE: Ice.state });
}
}
});
}
requirejs(['jquery', 'jqueryColor', 'annyang', 'prefixfree', 'gapi', 'ytpapi', 'gjsapi'], function() {
Ice = new ice();
if(annyang) {
var commands = {
'Ice search youtube for *exp': function(param) {
Ice.execute('watchSearchList', param);
},
'Ice watch (youtube) channel': function(param) {
Ice.execute('watchChannel', param);
},
'Ice play': function(param) {
Ice.execute('togglePlayback', param);
},
'Ice fit': function(param) {
Ice.execute('fit', param);
},
'test *exp': Ice.test
};
annyang.init(commands);
annyang.start();
}
function ice() {
/*
* Variables of Ice
*/
this.props = {
order: 'viewCount',
part: 'snippet',
type: 'video',
maxResults: 50,
q: '',
channelId: ''
}
this.state = -1;
this.intelligence = 9001;
/*
* Functions of Ice
*/
/* Debug Functions */
this.execute = function(func, param) {
Ice.flash();
Ice.log(func);
Ice[func](param);
};
this.test = function(term) {
Ice.log(term);
};
this.flash = function() {
var oldColor = $('h1').css('color');
$('h1').animate({ 'color': 'black' }, function() {
$(this).animate({ 'color': oldColor });
});
}
this.log = function(log) {
$('h1 span').text(log);
};
/* Video Functions */
this.togglePlayback = function() {
var func = (Ice.state == 1 ? 'pause':'play')+'Video';
console.log(func);
player[func]();
};
this.fit = function() {
var W = $(window).innerWidth(),
H = $(window).innerHeight();
console.log({ W: W, H: H });
player.setSize(W, H);
$('.video-player').addClass('full').css({
'width': W+'px',
'height': H+'px'1
});
};
this.watchChannel = function() {
Ice.props.channelId = Ice.getChannelId(prompt('Write Channel:', 'EthosLab'));
console.log({ channelId: Ice.props.channelId });
Ice.props.order = 'date';
Ice.playVideos();
}
this.watchSearchList = function(q) {
Ice.props.q = q;
Ice.playVideos();
}
this.playVideos = function() {
function onSearchResponse(response) { showResponse(response); }
function showResponse(response) {
console.log(response);
videoList = [];
for(var i = 0; i < response.items.length; i++) {
videoList.push(response.items[0].id.videoId);
}
// videoList = shuffle(videoList);
console.log({ videoList: videoList });
player.loadPlaylist(videoList);
$('.video-player').animate({
'height': '720px',
'width': '1280px',
});
}
console.log(Ice.props);
var request = window.gapi.client.youtube.search.list(Ice.props);
// Send the request to the API server,
// and invoke onSearchRepsonse() with the response.
request.execute(onSearchResponse);
};
/* YouTube functions */
this.setChannelIdFromUsername = function(username) {
Ice.props.channelId = Ice.getChannelId(username);
};
this.getChannelId = function(username) {
var channelId = '';
function onSearchResponse(response) {
console.log(response);
Ice.props.channelId = response.items[0].id;
Ice.playVideos();
}
var request = window.gapi.client.youtube.channels.list({
part: 'snippet',
forUsername: username,
});
request.execute(onSearchResponse);
console.log({channelId: channelId });
return channelId;
};
}
this.returnChannelId = function() {
};
});