Can't pass string variable to function - javascript

I have a dropdown and when one of the items is clicked, I call this function:
onClick(type) {
type.preventDefault();
let query = type.target.text;
PokeApi.pokemonType(query).then(function(data) {
console.log(data);
}.bind(this));
}
The console.log returns undefined.
When I do this:
onClick(type) {
type.preventDefault();
let query = type.target.text;
console.log(query);
console.log(typeof query);
PokeApi.pokemonType(query).then(function(data) {
console.log(data);
}.bind(this));
}
The first console.log will return the text of the dropdown item. The second console.log will return string. Now, when I pass query to PokeApi.pokemonType, I can get back a 404 error from the api and the third console.log returns undefined.
But if I pass in the text of the dropdown directly like this:
onClick(type) {
type.preventDefault();
PokeApi.pokemonType("ice").then(function(data) {
console.log(data);
}.bind(this));
}
Everything works perfectly fine and I get the correct object back from the api.
Any idea why this happening? What am I doing wrong?


You have to get the value of the dropdown selected element
var sel = document.getElementById('myDropdown'),
var selectedText = sel.options[sel.selectedIndex].value;

Related

Why is my filter not working as expected?

I have got a set of Gym Classes which gets pulled from the database, this is the log of that:
When it gets pulled they get put into two different arrays:
gymClasses: [],
filteredClasses: [],
Then when a user clicks one of the dropdowns it gets the value of the selected dropdown with the this.filterClasses(event.target.value);
Then the function to that runs this:
filterClasses(value) {
const newFilteredClasses = this.state.gymClasses.filter( (value) => {
return this.state.gymClasses.type === value;
});
this.setState({filterClasses: newFilteredClasses});
console.log('values ', this.state.filteredClasses);
}
When I open the last console.log which is supposed to show me the filteredClasses it shows me the same classes like the ones which did not get filtered.
This is the result of the last
console.log('values ', this.state.filteredClasses);
Any advice of help would be appreciated!

In the filter callback, you are checking type of
this.state.gymClasses.type === value
Ideally you should use callback param instead of this.state.gymClasses.type
try this
filterClasses(selectedValue) {
const newFilteredClasses = this.state.gymClasses.filter( (value) => {
return value.type === selectedValue;
});
this.setState({filterClasses: newFilteredClasses});
}

get specific value from response.data angular js

i want to get specific value from a response, here is my js
$scope.cari = function () {
$http.get('http://localhost:8089/MonitoringAPI/webresources/login?a='+$scope.userid+'&d='+$scope.password).then(function(response){
$scope.reslogin = response.data;
$scope.reslogin2 = response.data.lsmenu.idmenu;
console.log($scope.reslogin);
console.log($scope.reslogin2);
});
};
but when i console.log the $scope.reslogin2gives me undefined value. here is my response
[{"userid":"1234",
"username":"ristian",
"posisi":"ITSupport",
"lsmenu":[{"idmenu":"1","parentidmenu":"11","parentnamemenu":"Monitoring","urlmenu":"lalala.html"}]}]

According to what you posted, your response is an array (so is the lsmenu). Therefore you should get the first element of the array and also the first element from the lsmenu.
$scope.cari = function () {
$http.get('http://localhost:8089/MonitoringAPI/webresources/login?a='+$scope.userid+'&d='+$scope.password).then(function(response){
$scope.reslogin = response.data;
$scope.reslogin2 = response.data[0].lsmenu[0].idmenu;
console.log($scope.reslogin);
console.log($scope.reslogin2);
});
};

It should be, response.data is an array and lsmenu is also an array
$scope.reslogin2 = response.data[0].lsmenu[0].idmenu;

TypeError on split()

I am trying to hide elements based on whether the user has added the class numbers to the database which I am retrieving through json data. If all the class numbers are present on the component I want to hide it.
At the moment I keep getting this error:
TypeError: $(...).data(...).split is not a function
export function VisaToggleComponent() {
let json = {
visa_subclass:[462,500,801]
};
let elements = document.querySelectorAll('[data-visa-hide]');
console.log(elements);
$(elements).each(function() {
let data = json.visa_subclass,
target = $(this).data('visa-hide').split(',').map(Number);
console.log(target);
for (let i in data) {
let val = data[i];
let index = target.indexOf(val);
if(index > -1) {
$(this).hide();
}
}
});
}

split is a method of the String object. Since you're getting
TypeError: $(...).data(...).split is not a function
It means $(this).data('visa-hide') is not a string.
To be honest, I didnt try to understand your code, however if you think $(this).data('visa-hide') is string-like data type you have to change $(this).data('visa-hide').split(',') to String.prototype.split.call($(this).data('visa-hide'), ',')

Can we use variable in request param of get rest call in Angularjs?

I want param`s key as variable whose value get substituted.
Following code depicts my problem.
js code
$scope.firstNameAutoSuggestUrl='getFirstName';
$scope.paramName='fname';
$scope.paramValue='sa';
testParamMethod($scope.firstNameAutoSuggestUrl , $scope.paramName, $scope.paramValue)
function testParamMethod (url ,paramName ,paramValue)
{
$http.get('rest/'+url+'?cd='+ (new Date()).getTime(),{params:{paramName:paramValue} } ).success(function(data)
{ }).error(function(data)
{}
);
}
Actual Request formed
'context root'/rest/getFirstName?cd=1417684294261&paramName=sa
Expected Request
'context root'/rest/getFirstName?cd=1417684294261&fname=sa
Is there any way that paramName get substituted to value which I have set.

try this not sure,
function testParamMethod (url ,paramName ,paramValue)
{
var paramsArr = [];
paramsArr[paramName] = paramValue;
$http.get('rest/'+url+'?cd='+ (new Date()).getTime(),{params:paramsArr}).success(function(data){
}).error(function(data){
});
}

how to return results to the calling function (development of a firefox extension)

In my firefox extension I have a sqlite-database with some tables. Using executeAsync(), I updated the tables, inserted some new data and selected some values. The select-case cause me some problems.
Within the handleCompletion()-function I can pass the retrieved data from the table to another function (and can alerting the results, for example). But I would like to pass the result back to the calling function. I searched the net for an answer to my problem, but I can't find a solution.
What I found:
retrieveData: function() {
var rows = new Array();
if (this.dbConn.connectionReady){
statement = this.dbConn.createAsyncStatement("SELECT * " +
"FROM 'domains' " +
";");
statement.executeAsync ({
handleResult: function(aResultSet) {
var i = 0;
for (let row = aResultSet.getNextRow(); row; row = aResultSet.getNextRow()) {
rows[i] = row;
++i;
}
},
handleError: function(anError) {
alert("error");
},
handleCompletion: function(aReason) {
if (aReason != Components.interfaces.mozIStorageStatementCallback.REASON_FINISHED) {
// something went wrong
alert("error2");
}
}
});
}
return rows;
}
This code does not return the expected results. The statement is executed after the method returned the Array "rows". So, my calling function can never receive the data from the table...
How can I solve this problem? Is there something like a timeout for returning the datarows of the table?
Thanks a lot for help!

You should ideally be dealing in callbacks in the above example. Thats how the SQLite API developers intended the API to be used. :)
retrieveData: function(_callback) {
...
statement.executeAsync ({
...
handleCompletion: function(aReason) {
...
_callback(rows);
}
});
}
And where you call the function:
retrieveData(function(rows) {
// do stuff with rows here
});

Categories

Resources