I am using VueJS and trying to use v-model. to connect checkboxes to values in an object:
jobsChecked: {Baker: false, Cook: false, Miner: false} // etc...
and the checkbox element:
<div class="checkbox jobs" v-for="j in jobs" :key="j">
<label>
<input type="checkbox" v-model="filters.jobsChecked.j"
#change="filterJobs(j)"> {{ j }}
</label>
</div>
with filterJobs() firing when I click one of these boxes:
filterJobs(j) {
if (!this.filters.jobs.includes(j)) {
this.filters.jobs.push(j);
this.filters.jobsChecked[j] = true;
} else {
const index = (ele) => ele === j;
const remove = this.filters.jobs.findIndex(index);
this.filters.jobs.splice(remove, 1);
this.filters.jobsChecked[j] = false;
}
console.log("jobs filters: ", this.filters.jobs);
console.log("jobs checked: ", this.filters.jobsChecked);
}
Expected output: The function receives "j" which is read as the string "Baker". The syntax for modifying an Object's property works and checking "Baker" pushes Baker to the filters.jobs array AND uses filters.jobsChecked.j to make filters.jobsChecked.Baker = true
Actual output: The function receives "j" which is read as the string "Baker", pushes "Baker" into the filters.jobs array, but then adds the key/value 'j: true' to filters.jobsChecked.
My confusion comes in here where I am expecting that, since the rest of the function seems to be fully aware the 'j' is not actually the letter j, but instead a passed variable with the value of "Baker", it will know that "filters.jobsChecked.j" = "filters.jobsChecked.Baker" and using object modification syntax, it should change the value to true as I wrote.
I have been reading other posts and websites all night about this and nothing I found made any sense or seemed to englighten me on this situation. As far as I can see, I am writing it exactly as it should be and using [] square notation since it's a variable being passed in.
I also tried writing ['j'] but that also just ADDED the key value "j: false" to the object...
What am I missing here? I have a feeling it's something stupidly obvious...
There is invalid syntax for accessing the string contained in j in the context of an object property.
filters.jobsChecked.j is looking for a property named "j" on the jobsChecked object, but it doesn't exist. Use bracket notation to evaluate j as a variable:
filters.jobsChecked[j]
Related
I am following a course on blockchain which has the following piece of code.
What does " index:this.chain.length+1 " mean? Is index a variable in the object newBlock? Or is it a key value pair? If it is a variable, why don't we simply use index=this.chain.length+1? Also what is the type of the object newBlock?
function Blockchain()
{
this.chain=[];
this.newTranscations=[];
}
Blockchain.prototype.createNeBlock = function(nonce,previousBlockHash,hash)
{
const newBlock ={
index:this.chain.length+1,
timestamp:Date.now(),
// all of the transactions in this block will be the transactions that waiting to be put in a block
transactions:this.newTranscations,
// nonce is hust a number giving proof of the transaction
nonce:nonce,
hash:hash,
previousBlockHash: previousBlockHash
}
// As we move all the pending transactions to the new block, we clear this array
this.newTranscations=[];
this.chain.push(newBlock);
return newBlock;
}
var Box = {
"playdoh":{"playdoh":["none", "some", "none", "none", "some"]}
};
Box of playdoh upon playdoh, you're getting into the study of Objects/Arrays/Maps.
To call the above out, it'd be
console.log(Box["playdoh"]["playdoh"][0]);
= none
console.log(Box["playdoh"]["playdoh"][4]);
= some
console.log(Box["playdoh"]["playdoh"][5]);
= null (undefined)
is the same as
console.log(Box.playdoh.playdoh[0]);
= none
console.log(Box.playdoh.playdoh[4]);
= some
console.log(Box.playdoh.playdoh[5]);
= null (undefined)
It is one of several ways to initialize an object called newBlock in javascript. Take a look at this documentation on MDN
The index property is of type number in this case, and it is set to equal chain[].length + 1
Woo first stackover flow post!
I'm trying to change a result depending on what "character" button is clicked.
So I start with a variable called: gendr = [];.
if the button named "marge" is clicked, the margeFunction will run, which pushes the value "female" inside the array.
If the button "Henry" is clicked, the henryFunction will run, which pushes the value "male" inside the array.
A later function contains an if else statement, where if the array contains the value male "male sentence appears."
else if the arrays value is female,
"female sentence appears."
function helloFunction() {
if(gendr[female]) {
document.getElementById ('traitText').innerHTML = "and says the word hello in every sentence she speaks";
} else {
document.getElementById ('traitText').innerHTML = "and says the world hello in every sentence he speaks"
}
}
I'm not exactly sure how to do this I just made a guess but I would like to know the correct way to do this! thanks in advance :)
gendr[female] won't work, as there is no female variable, and you don't want to access the female position in the array, instead, it sounds as if you want to get the last value of that array. That can be done with gendr[gendr.length - 1] . Now you want to check if that value is "female" and you can check that by comparing it (===).
However it is questionable wether you need an array at all, why not just keep a boolean (isFemale = false;)?
There are multiple ways to do what you are trying to achieve. The indexOf method is an effective way to check if an element exists in an array. Also, ECMAScript 2016 has a new method includes to check if an element exists inside an array.
Here's an example:
var gender = ['male', 'female'];
function checkInArray(genderArray) {
if(genderArray.indexOf('male') > -1) {
//do something
return 'male found';
} else {
//do something
return 'female found';
}
}
function checkInArray2(genderArray) {
return genderArray.includes('male');
}
console.log(checkInArray2(gender))
var array = [1,2,3,4,5];
array.includes(2); //true
array.includes(4); //true
array.includes(1, 2); //false (second parameter is the index position in this array at which to begin searching)
Check this out: https://playcode.io/373046
The HTML part of your question should look like this
<button onclick="helloFunction('female')">Marge</button>
<button onclick="helloFunction('male')">Henry</button>
The javascript then
function helloFunction(gendr) {
if(gendr=="female") ...
}
I believe your problem is more about parameter passing and it is not about arrays.
I've done some research on this issue. I am trying to manipulate an array of calculated values that looks like this in the console:
{nodeVoltages: Array(11), totalPower: Array(1), xlength: Array(11)}
nodeVoltages: Array(11)
0:48
1:47.71306060387108
2:47.250273223993105
3:46.59686907269243
4:45.71876416434013
5:44.53304242029258
6:42.745236969423615
7:Complex {re: 40.38334500994142, im:1.919295696316476, __ember1513267958317: "ember368"}
8:Complex { re:39.55961661806138, im:3.8933604519196416, __ember1513267958317: "ember369"}
This array is created dynamically through some math that I've come up with so there is no input data that I can give you. I'm trying to make the above array look like this:
{nodeVoltages: Array(11), totalPower: Array(1), xlength: Array(11)}
nodeVoltages: Array(11)
0:48
1:47.71306060387108
2:47.250273223993105
3:46.59686907269243
4:45.71876416434013
5:44.53304242029258
6:42.745236969423615
7:40.38334500994142
8:39.55961661806138
Using mathjs, I was able to evaluate my expressions and dynamically add the values into an array with the array.push command and display them. However, my code breaks once the imaginary values pop up in the results of my array.
How can I remove these imaginary numbers from my array? In other words, I need to remove the "im:" parts of the values when they begin to appear before I push them to the displayed array.
I tried to do this with some code I found from a previous answer to someone else's question (How do I remove a particular element from an array in JavaScript?) splice command like this:
var nodeVoltage2 = parser.eval(expression2);
//checks if there are imaginary values and removes them
if ("im" in nodeVoltage2) {
nodeVoltage2.splice(2,1)
}
//adds value to result array for analysis
nodeVoltages.push(nodeVoltage2);
but it returns in the console that "im is not defined".
Any help is greatly appreciated!
You can use the array map function.
Basically, we loop through the array. If the item has a .re property, we take that value only. If there is no .re property, we keep the value as is.
We can either write that in shorthand, as with result using the ternary operator and arrow function, or we can write it in a slightly more verbose but traditional way, as with resultTwo
let data = [
48
,47.71306060387108
,47.250273223993105
,46.59686907269243
,45.71876416434013
,44.53304242029258
,42.745236969423615
,{re: 40.38334500994142, im:1.919295696316476, __ember1513267958317: "ember368"}
,{ re:39.55961661806138, im:3.8933604519196416, __ember1513267958317: "ember369"}
]
let result = data.map((x) => x && x.re ? x.re : x);
let resultTwo = data.map(function(elem) {
// First, we need to check that the array element is not null / undefined
// We then need to check that it has a property called re that is also not null / undefined
if (elem != null && elem.re != null) {
// Just return the property we're interested in
return elem.re;
} else {
// Return the element as is
return elem;
}
});
console.log(result);
console.log(resultTwo);
So I'm rendering my textarea dynamically using ngFor however I'm not sure how I can pass the ngModel to bind it in my function.
<div *ngFor="let inputSearch of searchBoxCount; let i = index" [ngClass]="{'col-sm-3': swaggerParamLength=='3', 'col-sm-9': swaggerParamLength=='1'}">
<textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search Product {{inputSearch.name}}"
[(ngModel)]="inputSearch.name"></textarea>
</div>
textarea example:
textarea is render based on the length of the response I get from api call in my case searchBoxCount is basically searchBoxCount.length, so if it length is = 1 then it will only render 1 textarea if its 3 then it will show 3 textareas. The objs have different names (example: id/email/whatever), so ngModel is based on the obj name from the json object.
How do I bind inputSearch.name to my function getQueryString()
getQueryString() {
this.isLoading = true;
let idInputValue = inputSearch.name; //bind it here
return "?id=" + idInputValue
.split("\n") // Search values are separated by newline and put it in array collection.
.filter(function(str) {
return str !== ""
})
.join("&id=");
}
Search func where getQueryString() is called
searchProduct() {
let queryString1 = this.getQueryString();
this._searchService.getProduct(queryString1)
.subscribe(data => {
console.log(data);
});
}
I know how to do it if the ngModel is not coming from the ngFor, is there another way to get the value from the textarea without ngModel? maybe that's the only way or if I can still use ngModel.
Summary of current state
First, let me summarize where your data is. You have a list of one or more objects named searchBoxCount. Each of the elements in the list is an object which has a name property, so you could, for example, call let name = this.searchBoxCount[0].name; to get the name of the first object in the list.
In the HTML template you use ngFor to loop through all of the objects in the searchBoxCount list, and in each iteration you assign the object to a local (to the ngFor) variable named inputSearch. You then bind the input from the textarea created in each loop iteration to the name property for that iteration's inputSearch object.
How to get your data
The key here is that the inputSearch is the same Object as is stored in searchBoxCount at some particular index (index 0 for the first object, etc...). So when the ngModel is tied to inputSearch.name it is also bout to searchBoxCount[n].name. External to the ngFor, you would loop through the searchBoxCount list to get each name you need.
As a consequence
Based on the comments on the original post, it sounds like you can have one or
more names that you need to include in the query string output. That means for your getQueryString() to work, you have to loop through the list (or as in this case, let the list loop for us):
getQueryString() {
this.isLoading = true;
let result : string = "?id=";
this.searchBoxCount.forEach(
(inputSearch:any) => { //Not the same variable, but same objects as in the ngFor
result = result + inputSearch.name + "&id=";
});
result = result.slice(0, result.length - 4); //trim off the last &id=
return result;
}
Edit: Multiple different fields with different names
From the comments on this post, it now is clear each inputSearch has its own key to be used in the query string, that is stored in the name property. You need to preserve that name, which means you can't bind the ngModel to it. Otherwise the user will destroy the name by typing in their own text and there will be no way to get the correct key back. To that end, you need to store bind the ngModel to some other property of the inputSearch object. I am going to assume the object has a value property, so it looks like this:
{
name: "id",
value: "33\n44"
}
That is, each inputSearch has a name, and the value will have one or more values, separated by new line. You would then have to change the HTML template to this:
<div *ngFor="let inputSearch of searchBoxCount; let i = index"
[ngClass]="{'col-sm-3': swaggerParamLength=='3', 'col-sm-9':
swaggerParamLength=='1'}">
<textarea name="{{inputSearch.name}}"
id="{{inputSearch.name}}" rows="3" class="search-area-txt"
attr.placeholder="Search Product {{inputSearch.name}}"
[(ngModel)]="inputSearch.value"></textarea>
</div>
Notice that I changed the ngModel from inputSearch.name to inputSearch?.value (the ? allows for null if there is no value to begin with) inputSearch.value. The getQueryString() method then looks something like this:
getQueryString() {
let result:string = "?";
//for each of the input search terms...
this.searchBoxCount.forEach( (inputSearch:any) => {
// first reparse the input values to individual key value pairs
let inputValues:string = inputSearch.value.split("\n")
.filter(function(str) { return str !== "" })
.join("&" + inputSearch.name + "=");
// then add it to the overall query string for all searches
result = result +
inputSearch.name +
"=" +
inputValues +
"&"
});
// remove trailing '&'
result = result.slice(0, result.length - 1);
return result;
}
Note, using RxJs this is probably easier but I am testing vanilla javascript.
Using this, if the user entered two IDs (33 and 44), a single sku, and two emails, the result would be ?id=33&id=24&sku=abc123&email=name#compa.ny&email=an.other#compa.ny
VIEW:
I have a rows repeating , with a save button on each row to save each object individually. I want this button to be disabled if no changes have been made.
<tr ng-repeat="option in options | filter:search">
<a ng-click="save(option)" ng-disabled="isUnchanged(option)">Save</a>
</tr>
CONTOLLER:
So I pass the option object to the function, I get its index position in the array. Then compare this 'option' object to its original self in apiKeyOptions[index] which is injected as a service.
angular.module('PartOfApp')
.controller('PartOfAppCtrl', function( $scope, ... apiKeyOptions) {
$scope.options = apiKeyOptions;
$scope.isUnchanged = function(option) {
var index = $scope.options.indexOf(option);
//compare object to the original
if(option.value == apiKeyOptions[index].value && apiKeyOptions[index].setting == option.setting){
//then no changes have been made to this
return true;
}else{
return false;
}
For some reason I get a console of 100's of errors when any data is changed, saying that the apiKeyOptions[index].value and apiKeyOptions[index].setting are undefind.
The app works perfectly as it should returning true if they are the same but still throws a
TypeError: Cannot read property 'value' of undefined
on apiKeyOptions[index]
if I console.log(apiKeyOptions[index].value) I get no undefined values and all log correctly.
Im guessing Im breaking some angular rules, if anyone could help that would be great.
apiKeyOptions overview:
apiKeyOptions is an array of up to 50 objects
each object is in the form
{
defaultValue: boolean,
description: null,
name: String,
setting: "Default" or Boolean,
value: Boolean
}
Added after comment below:
If I add-
console.log(index);
console.log(apiKeyOptions[index]);
to the function $scope.isUnchanged, I get the expected results
example :
13
Object {name: "LOREM IPSUM", description: null, defaultValue: false, setting: "default", value: false…}
So index is not always -1. The reason I pass the object to the function and not $index is because of the filter | search so the index will change depending on the search.
FIXED
As shown in the answer below . I was getting a index = -1 error but its was buried in 100's of CORRECT log outputs.
Oddly this did not stop the app from working and I will need to have a deeper look into how ng-disabled is bound to a value. To fix I simply replaced the indexOf with
for (var i = 0; i< $scope.options.length; i++ ){
if($scope.options[i].name == option.name){
var index = i;
}
}
The problem seems to be with the parameter passed to $scope.isUnchanged = function(option) {
Since ng-repeat creates a new scope for each loop, i suspect that the 'option' available to each loop would be a new object and will not have a reference to 'options' array.
<tr ng-repeat="option in options | filter:search">
Therefore your isUnchanged function will receive parameter as a new object and hence below code always returns -1. Because indexOf matches the given argument in the array and since the argument 'option' is an object and doesn't refer(reference comparison) the same element of array hence no match will found. i.e var a = {id:1};var b = [a]; b.indexOf({id:1}) === -1; b.indexOf(a) === 0;
var index = $scope.options.indexOf(option);//always be -1 in your case
// therefore apiKeyOptions[index] will always be undefined
As a workaround you should pass $index to isUnchanged from the view.