hello I have one a array $scope.name .I am spliting the array into small arrays .But after spliting the array .it become blank why ?
actually I assigned the given array into temp variable and splite the temp variable .Again my $scope.name become blank why ?
here is my plunker
http://plnkr.co/edit/iUscrw0xclHSnsIWMMTM
console.log("before");
console.log($scope.name);
var test=$scope.name;
console.log("after");
console.log($scope.name);
console.log("test");
console.log(test);
var arrays = [], size = 3;
while (test.length > 0)
arrays.push(test.splice(0, size));
console.log(arrays);
console.log("name");
console.log($scope.name);
You are directly assigning object to other object, so that will cause change in any of the object will update other object value.
Use angular.copy instead of assigning object directly, that will create a new clone copy of that object will returned.
var test=angular.copy($scope.name);
Forked Plunkr
Related
I have a button, when I press it will run the program below, but the array always starts from index 0 continuously
_check(){
let name = this.shadowRoot.querySelector('.name').value
var arr =[]
arr.push(name)
console.log(arr);
}
i expect the output ["text","text",...] but the actual output is ["text"]
As CinCout mentioned - the issue is that of scope - specifically you are resetting arr back to an empty within the function scope and then pushing the single value into it - meaning it will never have an more that the single value in it.
The solution is to set the array outside the scope of the function and then you will be able to push the value into the array.
let arr =[];
function _check(){
let name = document.querySelector('.name').value;
arr.push(name);
console.log(arr);
}
<button type="button" onclick="_check()" class="name" value="test">Click me</button>
I am pushing an object into an array but cannot do it?
I'm doing it like this
this.passData = this.tribeForm.value;
var id = {"tribe_id": 1}
this.passData.push(id)
This is the value in the tribeForm
I also tried
var id = {tribe_id: 1}
and
this.passData.splice(0,0, id)
and
this.passData = Array.prototype.slice(id)
and
this.passData.concat(id)
but it all ends up with
TypeError: this.passData.push/splice/concat is not a function
The question is not that clear, But I understood you are manipulating form data, value of form data returns an Object, Not an array. Objects in JavaScript are represented as key-value pairs, (or attribute-value) pairs.
Example :
var object = {
name : "Jhon",
grade : 12,
gpa : 8.12
}
It is just a collection of key-value pairs, push(), concat() and other methods are supported only for Arrays not for Objects. You can achieve whatever you want simply by creating a new key/attribute and assigning the value to it.
this.passData = this.tribeForm.value
this.passData['tribe_id'] = 1
//or, Objects can also contain nested object
this.passData['someKey'] = {'tribe_id' : 1}
You can create an empty array and push objects to it
Example :
var exampleArray = []
exampleArray.push({'tribe_id' : 1})
Now, it works because exampleArray is an Array not JS object.
Thanks for A2A
First, you need to understand the error:
TypeError: this.passData.push/splice/concat is not a function
Push/splice/concat is functions for Array and because of that the console is yelling at you that the passData is not an Array.
Make sure your passData is an Array and you will able to do so.
I'm manipulating an array of objects that i get from an http request containing coordinates to create markers in google-maps , but i need to eliminate all the null values in the array. I'm trying with compact but it gives back the same array unchanged.
//this is the resulting array structure
var array=
[{"id":0,"latitude":45.17850875854492,"longitude":7.773523330688477},{"id":1,"latitude":45.122344970703125,"longitude":7.7135162353515625},{"id":2,"latitude":null,"longitude":null},{"id":3,"latitude":45.11630630493164,"longitude":7.730717658996582},{"id":4,"latitude":45.116214752197266,"longitude":7.730687141418457},{"id":5,"latitude":null,"longitude":null}]
var comp =_.compact(array)
i dont get any error in the cosole , but the variable comp return the same exact array without removing null values
All your values are arrays, and the null is a value of your properties. The _.compact() method works with primitives.
Use _.reject() and check with _.isNull if the properties are null, and the object should be removed:
const array =
[{"id":0,"latitude":45.17850875854492,"longitude":7.773523330688477},{"id":1,"latitude":45.122344970703125,"longitude":7.7135162353515625},{"id":2,"latitude":null,"longitude":null},{"id":3,"latitude":45.11630630493164,"longitude":7.730717658996582},{"id":4,"latitude":45.116214752197266,"longitude":7.730687141418457},{"id":5,"latitude":null,"longitude":null}]
const result = _.reject(array, ({ latitude, longitude }) =>
_.isNull(latitude) || _.isNull(longitude)
)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
You can use _.pickBy()
Creates an object composed of the object properties predicate returns truthy for
lodash
This applies on object so for an array you can use that:
var comp = _.map(array, item => _.pickBy(item));
I have this code:
$scope.DefaultSidebarLinks = [
{
"Link":"/home",
"Title":"Home",
"Icon":"fa-home"
}
];
$scope.SidebarLinks = $scope.DefaultSidebarLinks;
$scope.addSidebarLink = function(link,title,icon,resetFirst){
var element = {"Link":link,"Title":title,"Icon":icon};
if(resetFirst)
{
$scope.SidebarLinks = $scope.DefaultSidebarLinks;
$scope.SidebarLinks.push(element);
}
else
$scope.SidebarLinks.push(element);
}
The main problem is that when I push a new element in SidebarLinks, it pushes it also in DefaultSidebarLinks.
What I'm trying to do is to reset the SidebarLinks if asked and push the new given element only in this local variable.
Wen you assign an array like this :
$scope.SidebarLinks = $scope.DefaultSidebarLinks;
you are creating two arrays which are same i.e two different names of same array . They are pointing to same memory , so any change in $scope.SidebarLinks will also change the array $scope.DefaultSidebarLinks as these both are same .
If you want deep copy an array you can do it by many ways :
Solution1(Angular way):
$scope.SidebarLinks=angular.copy($scope.DefaultSidebarLinks);
Solution2 (javascript way):
$scope.SidebarLinks = $scope.DefaultSidebarLinks.slice();
Basically, the slice() operation clones the array and returns the reference to the new array.
I have an array with unordered keys, and I want to display them. The problem is that angular repeats it for all the keys, even when they are not set.
this is the code:
<div ng-controller="MyCtrl">
Hello, {{a[10]}}!
<p ng-repeat="b in a">
1. {{b}}
</p>
</div>
<script>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.a = [];
$scope.a[10] = "aaa";
}
</script>
and this is the output:
Hello, aaa!
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1. aaa
i want only the array keys that are set to output. no empty b's please...
here is a jsfiddle
In essence your problem is not AngularJS related but rather how JavaScript works.
If you have an empty array and you assign an element to position 10, then JavaScript will automatically resize the array to 11 elements (since an array index starts at zero) so the index is large enough to hold your element.
You could write extra code to filter the empty elements, but based on what you write, I think you would be better off with using an object to store your data.
I have created a plnkr for your convenience: http://plnkr.co/edit/apRLuJr4zqS2zbMz322Q?p=preview
// Array
$scope.sampleArray = [];
$scope.sampleArray[10] = 'test';
// Object
$scope.sampleObject = {};
$scope.sampleObject[10] = 'test';
As you can see the syntax is very similar, but the output is completely different.
By using an object, you will automatically eliminate the empty lines.
It will also keep your code simpler since you won't have to deal with the empty array elements.
Hope that helps!
There's plenty of ways to do a cleanup on your array inside the controller (e.g. using $watchcallback on a that would remove the empty elements from it whenever it changes).
Here's a solution that uses a simple custom filter, defined in a controller:
function MyCtrl($scope) {
$scope.namea = 'Superhero';
$scope.a = [];
$scope.a[10] = "aaa";
$scope.myFilter = function(item){
return item;
}
}
<p ng-repeat="b in a | filter:myFilter">
1. {{b}}
</p>
As stated in filter docs, the 'filter' filter can take a function:
function: A predicate function can be used to write arbitrary filters.
The function is called for each element of array. The final result is
an array of those elements that the predicate returned true for.