ImmutableJS Set not flattening - javascript

I have the following code:
Immutable.Set(['valor1', 'valor2', 'valor2', 'valor3', ['valor4', 'valor5']]).flatten().toJS();
This doesn't work as expected, but returns the like it was inputted. If I treat it as a List, it works as expected:
Immutable.fromJS(['valor1', 'valor2', 'valor2', 'valor3', ['valor4', 'valor5']]).flatten().toJS(); // return flattened list
What's wrong with flatten function when using it with Set?

What's wrong with flatten function when using it with Set?
Nothing is wrong with it. It seems you have to wrong idea about how Set and flatten work. From the docs:
Flattens only others Iterable, not Arrays or Objects.
Immutable.fromJS(...) deeply converts the value to Maps and Lists, so the inner array is converted to an Immutable.List, and that's why it works. The constructor functions do not deeply convert, and so the set contains an array (which is not flattened).

Related

Why 'delete' replaces value with undefined in arrays but in objects it is able to remove the property completely?

What differences in object and arrays cause this? Why is Object able to remove the element and array cannot? Does Object automatically makes a check to not display undefined values?
delete will remove properties entirely from arrays.
const array = [0,1,2];
delete array[1];
console.log("0" in array);
console.log("1" in array);
Since most tools that display an array for debugging purposes will not display them with explicit index values, any missing values will typically be rendered as undefined.
If they didn't then you wouldn't be able to tell the difference between these two examples:
const sparse = [1,,2];
const full = [1,2];
console.log(sparse);
console.log(full);
If you want to shuffle the indexes of every subsequent item down the array, then you need to look at the splice method.

Array length is not correct in javascript

I have an array like below
arr=[];
arr[0]={"zero": "apple"};
arr[1]={"one": "orange"};
arr["fancy"]="what?";
but i am getting length as 2 when i do console.log(arr.length) even though i am able to console all the values .
and not able to get all values while doing console.log(JSON.stringify(arr))
What is the issue here.
here is the link to fiddle fiddle
.length is a special property in Javascript arrays, which is defined as "the biggest numeric index in the array plus one" (or 2^32-1, whatever comes first). It's not "the number of elements", as the name might suggest.
When you iterate an array, either directly with for..of or map, or indirectly with e.g. JSON.stringify, JS just loops over all numbers from 0 to length - 1, and, if there's a property under this number, outputs/returns it. It doesn't look into other properties.
The length property don't work as one will expect on arrays that are hashtables or associative arrays. This property only works as one will expect on numeric indexed arrays (and normalized, i.e, without holes). But there exists a way for get the length of an associative array, first you have to get the list of keys from the associative array using Object.keys(arr) and then you can use the length property over this list (that is a normalized indexed array). Like on the next example:
arr=[];
arr[0]={"zero": "apple"};
arr[1]={"one": "orange"};
arr["fancy"]="what?";
console.log(Object.keys(arr).length);
And about this next question:
not able to get all values while doing console.log(JSON.stringify(arr))
Your arr element don't have the correct format to be a JSON. If you want it to be a JSON check the syntax on the next example:
jsonObj = {};
jsonObj[0] = {"zero": "apple"};
jsonObj[1] = {"one": "orange"};
jsonObj["fancy"] = "what?";
console.log(Object.keys(jsonObj).length);
console.log(JSON.stringify(jsonObj));
From MDN description on arrays, here, "Arrays cannot use strings as element indexes (as in an associative array) but must use integers."
In other words, this is not Javascript array syntax
arr["fancy"]="what?";
Which leads to the error in .length.

Convert array of array objects into array of objects

I've spent the last couple hours going through some very similar answers to the above question but after a few implementations of loops and reduce I still have not gotten the solution I need.
I am getting an array of objects via service calls. I am pushing those controller array objects to another array because I need a single array to load data into a multi select. I.E.
StatesService.getAreaCities().then(function(response) {
controller.cities = response.data.rows;
controller.areaOptions.push(controller.cities);
});
StatesService.getAreaStates().then(function(response) {
controller.states = response.data.rows;
controller.areaOptions.push(controller.states);
});
controller.areaOptions = [];
This is an example of how I expect and need my array object to look.
With no modification this is how my array looks with those array objects pushed in.
How do I get the above data structure like the 1st image, an array of objects? I tried a solution with reduce()
var newCities = controller.cities.reduce(function(city){
return controller.city;
}, {});
controller.areaOptions.push(newCities);
but it wasnt what I was looking for because it returned a single object with all city property and all its values. I need each object to contain city and its value.
EDIT
I figured out the solution! Thanks to Lex.
I looped over each object in the array in each service and pushed the property.
Thanks to all for steering me in the right direction to figure this out, even the person that downvoted me :)
StatesService.getAreaCities().then(function(response) {
controller.cities = response.data.rows;
controller.cities.forEach(function(city){
controller.areaOptions.push(city);
});
});
Looks like response.data.rows is an array. So when you push response.data.rows into controller.areaOptions you are adding the rows array as an array element. (Basically making it a 2-dimensional array)
You should use Array.prototype.concat

Cannot reorder an array of objects in JS

I have an array of objects which are presented to the user as blocks. They can drag and drop to change the order that that blocks appear, which I then want to change the position of the objects in the array.
$scope.myArray = [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}];
function orderChanged(event) {
console.log($scope.myArray);
//logs [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}]
console.log("source:", event.source.index, "dest:", event.dest.index);
//logs source: 1 dest: 2
$scope.myArray.move(event.source.index, event.dest.index);
console.log($scope.myArray);
//logs [{a:1,b:2,c:3}, {a:11,b:22,c:33}, {a:111,b:222,c:333}]
};
//this is going to rearrange the array
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
};
The orderChange event has the source index and destination index as integers that represent their order as present to the user, which also maps to their positions in the array before any moving has occurred.
I cannot get the array to rearrange, each time I log the array in the orderChange function both logs return the same order.
All of the other examples of array re-ordering are for arrays that do not contain objects, I'm wondering if this is what is messing up my code?
I'm testing your code and works ok. Where are you modifying the Array prototype? Just try to replace the call to move() with the code that actually does the reorder and test...
Anyway, you're using AngularJS. Why are you messing with the DOM? Add a property called Order to each of your objects and let Angular do the syncrhonisation... that what is meant for.
In short, take a look at this module, maybe it would do your life easier:
http://ngmodules.org/modules/ng-sortable
I think, your code works ok, but the log does not.
console.log might not represent the values at runtime, but at viewtime, especially with multidimensional objects and arrays.
Try a different log to see console.log($scope[0].a, $scope[1].a, $scope[2].a)
You might want to check in a different brwoser, as this seems to be a Chrome issue, see here:
Is Chrome's JavaScript console lazy about evaluating arrays?
Wrong value in console.log

Array Self-Referencing Map - Very Bizarre Result

While experimenting with some different methods for generating JavaScript arrays, I stumbled on a weird result. Using map to push an array of self-references (DEMO):
a=[1,1,1,1,1,1,1,1,1,1];
a=a.map(a.push,a);
I get the following result (in Chrome):
[13,16,19,22,25,28,31,34,37,40]
Can anyone explain why?
For each element in a, push is being called with that element, the index of that element, and the array being traversed. For each element in the array, then, we add these three additional elements. This accounts for the length increasing by three for each element in the original array. The result of push is the length of the array after the elements are added, thus the resulting array (from map) is an array holding the lengths of the a array after each push callback is completed.
See the documentation for map and push.
It has something to do with the return value of push being the new length. Not sure why it incrementing by 3.
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push
Returns
The new length property of the object upon which the method was called.

Categories

Resources